javascript - 如何在 LI 导航菜单中使用 javascript 添加事件类

Question

我无法在我点击的 LI 导航菜单中添加事件类。

当我在 主页 上单击 WHAT WE DO 时，它跳转到 what we do 页面 所以我需要菜单 WHAT WE DO 在 我们做什么页面 中激活。

这是我的 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

您对多个元素使用相同的 ID。请删除它并为不同的元素使用不同的 ID。

您可以使用以下 jQuery 添加事件类:

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

代替

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

Working JSFiddle

注意:由于active class 的字体颜色为白色，因此在将active class 添加到li 后它是不可见的。