引导Navbar活动状态切换引导（与Javascript相关）

我在导航栏导航项上使用class=“active”和最新版本的引导（4），单击链接时不会切换。我发现了与此类似的问题，并试图使javascript适合我自己的代码，但没有成功。注意：我的导航栏上的这些链接都在同一页上。目标是激活点击导航项目链接，以便用户知道他们当前在页面上查看的内容

下面是我的javascript代码的样子：

$（.nav.nav link”）。在（“单击”，函数（）{
$（.nav”）.find（.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
});您似乎没有一个nav列表的祖先具有“nav”类-而且nav链接李应该获得“活动”类-而不是其中的“a”

此外，您可以直接将活动项作为目标来删除活动类，无论是li还是a

如果您想将活动类保留在a-上，那么只需更改click处理程序

$(".nav-link").on("click", function(){
   $(".nav-link.active").removeClass("active");
   $(this).addClass("active");
});

$(".nav-item").on("click", function(){
   $(".nav-item.active).removeClass("active");
   $(this).addClass("active");
});

如果你想在li上激活类，那么
如果您想将活动类保留在a-上，那么只需更改click处理程序

$(".nav-link").on("click", function(){
   $(".nav-link.active").removeClass("active");
   $(this).addClass("active");
});

$(".nav-item").on("click", function(){
   $(".nav-item.active).removeClass("active");
   $(this).addClass("active");
});

您没有在jQuery选择器中引用的class.nav

也要更新jQuery：

$(".nav-link").on("click", function(){
    $(".nav-link.active").removeClass("active");
    $(this).addClass("active");
});

链接到示例：