Bootstrap导航栏处于活动状态

Question

• 我有一个共同标题的网站。
• 该标题包含导航栏。
• 当我点击栏页面中的导航项时，会发生加载。
• 考虑上下文，如何为与加载页面相关的导航项设置Bootstrap导航栏活动状态。

由于点击导航栏项目时出现页面加载，我不能只使用

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

请为我提供更好的解决方案。

Answer 1

加载页面时，您必须检查锚点的链接是否与页面位置匹配。

$(".nav a").each(function() {
  if(document.location.href.indexOf(this.href)>=0) {
      $(this).parent().addClass("active");
    }
});

Answer 2

作为我的问题的解决方案，我遵循以下方式。

我为每个导航栏项添加了HTML ID。 然后在与每个导航栏项相关的每个页面中，我使用javascript添加了Bootstrap活动类，如下所示。

$（＆＃34;＃ID_of_the_navi_bar_item＆＃34）addClass。（＆＃39;有源＆＃39）;