How to do javascript add class active in LI navigation menu

Question

I can not add class active in LI navigation menu where i click.

When i click on WHAT WE DO on home page it jump to what we do page so i need menu WHAT WE DO in what we do page to be active.

Here is my JSFIDDLE

JS

$( document ).ready(function() {        
  $( "#cssmenu a" ).click(function(e) {
  e.preventDefault();
  var navId = $(this).attr("href");
  var str = '.' + $(this).attr('id');
    $("html, body").animate({
      scrollTop: $(navId).offset().top
    }, 600);

    $(str).show();
    $(this).closest('ul').find('li').removeClass("active");
    $(str).find('li').removeClass("active");
    $(str).closest('ul').find('li').addClass("active");
  });
});

Answer 1

Updated Fiddle

You need to find li - a in what we do page to add the class.Change the last line to this,

$(str).find('ul li a#'+$(this).attr('id')).parent().addClass("active");

Or just

$(str).find('a#'+$(this).attr('id')).parent().addClass("active");

Note : Your markup has Duplicate IDs which is invalid.

Answer 2

You are using same id for multiple elements. Please remove it and use different Ids for different elements.

You can add active class using below jQuery :

$(str).find('[href="'+navId+'"]').closest('li').addClass("active");

instead of

 $(str).closest('ul').find('li').addClass("active");

Working JSFiddle

Note : as active class has font color white hence it is not visible after adding active class to the li.

Answer 3

元素ID在整个文档中应该是唯一的。