Bootstrap导航栏激活状态

Question

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

既然有一个导航栏项目，当点击一个页面加载，我不能只用

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

请给我提供一个更好的解决方案。

Answer 1

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

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

$（“＃ID_of_the_navi_bar_item”）。addClass（'active'）;

Answer 2

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

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