javascript color toggles between two links working, not resetting when they need to

javascript color toggles between two links working, not resetting when they need to

I have two links popularity and new. if I click "popularity" it should turn green until I click "new". and vice versa for "new". And this works great. But thing is when I click home button that's in my navbar, the green color on the link should be gone. they should go back to the color they were before they are clicked.

my code

    
      
        popularity      
      
        new      
    
  
        

and in navbar I have

          home      
  

Answer by Eric Guan for javascript color toggles between two links working, not resetting when they need to

Why should they go back to the original color? You never told them to.

$('.navbar-brand').on('click',function(){      ul_li_a.css("color", "black");  })  

Answer by trevor_bye for javascript color toggles between two links working, not resetting when they need to

You could utilize both .addClass and .removeClass, and create another CSS class that changes the color back when you click the home button. This would be more seamless if you took the css out of your js code, and just use these two methods to switch between the classes you need on the home button click event.

edit: or what he said ^. There are many options.

Answer by SRDC for javascript color toggles between two links working, not resetting when they need to

Based on your problem description, and a quick scan of your code, it looks like you are properly setting the color when the two items themselves are clicked, but you have no function to handle unsetting the color when something else is clicked ... i.e. in your function that fires on-click, just check that if neither is used, clear the green color.

Alternatively, you could use something like is used here ... i.e. a conditional something along the lines of this: if(a[i].href.split("#")[0] == window.location.href.split("#")[0]). Then, just apply the green color if either of your two links are active.

Hope this helps!

Answer by Nikolay Ermakov for javascript color toggles between two links working, not resetting when they need to

If you can use ids for links, change your code as below. Check demo - Fiddle.

var ul_li_a = $("ul#shouldwork>li>a");  var lastClickTag = localStorage.getItem("last_clicked");    if(lastClickTag){    $("#"+lastClickTag).addClass('green');  }    ul_li_a.on("click", function(){          ul_li_a.removeClass('green');    $(this).addClass('green');     localStorage.setItem("last_clicked", this.id);  });    $('.navbar-brand').click( function() {      ul_li_a.removeClass('green');      $("#"+lastClickTag).addClass('green');  })  

HTML:

      
        popularity      
      
        new      
  
  

CSS:

.green {      color: green;  }  

Answer by tayvano for javascript color toggles between two links working, not resetting when they need to

I would do this with an .active class in CSS in order to make it more modular and easy to understand. Then, I would change the color based on your query strings, rather than using local storage.

I didn't have a way to test this so let me know if it works. If not, let me know what error is displaying in the console. I'm sure I may have missed something in the JS.

Here is a codepen if you'd rather look at it there: http://codepen.io/anon/pen/xVGYWE?editors=1111

HTML (links are removed as they broke in codepen, added class .link for better targeting in jQuery)

    
      
        popularity      
      
        new      
    
  
  

CSS

.link {    color: blue;    text-decoration: none;  }    .link:hover {    color: navy;    text-decoration: none;    }    .link.active {    color: green;  }  

jQuery

// change on click  var link = $('.link');    link.on("click", function(){          // remove any active classes    link.removeClass("active");    // add active class to link that was clicked    $(this).addClass("active");  });      // set up get query strings from URL  function getParameterByName(name, url) {      if (!url) url = window.location.href;      name = name.replace(/[\[\]]/g, "\\$&");      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),          results = regex.exec(url);      if (!results) return null;      if (!results[2]) return '';      return decodeURIComponent(results[2].replace(/\+/g, " "));  }    // see if the page is indeed sorted  var sort = getParameterByName('sort')    // if it has a query string of sort=score, make that active  if ( sort == "score") {    $(".sort a").addClass("active");  }    // if it has a query string of sort=date, make that active  if ( sort == "date") {    $(".date a").addClass("active");  }  

Answer by Reddy for javascript color toggles between two links working, not resetting when they need to

Clearing your lastClickTag from the local storage must resolve your issue along with this code.

$('.navbar-brand').on('click',function(){      localStorage.removeItem("last_clicked");   })  

remove this local storage. So your if(lastClickTag){ function will not be executed, And your color will remain black.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72