如何在导航项上添加引导 4 活动类？

Posted 2023-03-14

【中文标题】如何在导航项上添加引导 4 活动类？

【英文标题】：How to add bootstrap 4 active class on nav-item?

【发布时间】：2020-03-26 00:33:03

【问题描述】：

当用户单击导航菜单中的页面时，我正在尝试在我的 .nav-item 上添加一个活动类。这是我在堆栈溢出时发现的 jquery 代码。

$(document).ready(function()

    $(".nav-item").on("click", function()

        $(".collapse").find(".active").removeClass("active");
        $(this).addClass("active");

    );

);

这是我的 html 导航代码：

<nav class="navbar navbar-toggleable-md navbar-light">
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown2" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon navbar-toggler-icon-dark"></span>
                            <span class="fas fa-times hide"></span>
                        </button>
                        <a class="navbar-brand logo" href="/"></a>
                        <div class="collapse navbar-collapse" id="navbarNavDropdown2">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href=" route('index') ">Home <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href=" route('about') ">About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href=" route('how-it-works') ">How it Works</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href=" route('pricing') ">Pricing</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href=" route('faq') ">FAQ</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href=" route('contact') ">Contact</a>
                                </li>
                            </ul>
                        </div>
                        <a class="nav-link" id="searchBox"><i class="fas fa-search"></i></a>
                    </nav><!-- nav -->

我的问题与堆栈溢出的其他问题略有不同。出于某种原因，当我检查元素时，我可以看到它添加了活动类，但随后它立即消失了。我认为这可能与刷新页面有关？控制台中没有错误，所以我不确定问题是什么。有谁知道我该如何解决这个问题？

【问题讨论】：

你不能这样做，因为当你点击链接时，你会转到另一个页面（或刷新当前）。所以这个脚本可以工作，但是在刷新页面后，一切都恢复到原来的样子

【参考方案1】：

试试这个：

<li class=" Request::is('index') ? 'active' : '' ">Home</li>