Use JavaScript To Change The Class Of An

I have the following code:

• Page One

  Solution 1:

  Since you specified that you wanted a non-jQuery response, here's a function that will toggle appropriately:

  function toggleNavSelected(el){
      var list = document.getElementById('nav').children[0];
      for(var i=0; i<list.children.length; i++){
          var cur = list.children[i];
          if(el==cur){
              cur.classList.add("current");
              cur.firstChild.onclick = (function(){
                  toggleNavSelected(this.parentElement);
                  return false;
              });
          } else {
              if(cur.classList.contains("current")){
                  cur.classList.remove("current");
              }
              cur.firstChild.onclick = (function(){
                  toggleNavSelected(this.parentElement);
              });
          }
      }
  }
  

  Either add an onclick handler to each LI (onclick="toggleNavSelected(this);") or execute the following after the menu has loaded:

  var list = document.getElementById('nav').children[0];
  for(var i=0; i<list.children.length; i++){
      var el = list.children[i];
      el.firstChild.onclick = (function(){
          toggleNavSelected(this.parentElement);
      });
  }
  

  Demo: http://jsfiddle.net/bWY7P/2/

  (note: The JSFiddle script has a small difference; it adds a return false; to the onclick function so that you can play with it without the links actually following the HREF attribute. Do not use that line in your live code)

  ---

  Explanation:

  The function looks at each LI element within the #nav element.
  If that element is the element passed to the function, then it adds the class .current.
  Otherwise, it removes the class .current (if present).

  The second part binds a function to the onclick event of each a element that calls the toggleNavSelected() function and passes its parent element (the li) as the argument.

  
  

  Solution 2:

  1) if you want to change the currently selected class when you click an item, put the onclick into the li item 2) using jquery would be very easy here, all you have to do is import the jquery file with the <script> tag and you're ready! For example, you could do onclick="changeClass(this);" on the <li> tag and in a normal JavaScript file or in a script tag:

  function changeClass(this){
   $('#nav li').attr("class","");
   $(this).attr("class","current");
  }
  

  Replace the 'current' with the class name you want to use

  3) it should already be set as current

  4) use the :visited CSS selector to change what colour followed links look like eg:

  a:visited{
   color: #000000;
  }
  

  
  

  Solution 3:

  First of all you should set the event handler from a separate script, not from an onclick attribute. You don't repeat your code that way and have anything in one place. The HTML is also much cleaner.

  Using jQuery it would be as easy as:

  var menuLinks = jQuery( '#nav a' );
  
  menuLinks.on( 'click' function() {
  
      menuLinks.removeClass( 'active' );
      $( this ).addClass( 'active' );
  
  } );
  

  You could also do that in plain JS, but using some library keeps you out of the trouble of browser incompatibilities.

  
  

Share