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

【问题标题】：How to add bootstrap 4 active class on nav-item?如何在导航项上添加引导 4 活动类？
【发布时间】：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 -->

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

【问题讨论】：

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

标签： jquery html css laravel twitter-bootstrap

【解决方案1】：

试试这个：

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

【讨论】：