仅将类应用于活动导航项，引导程序的解决方法答案

【问题标题】：Applying class to only the active nav item, workaround for bootstrap仅将类应用于活动导航项，引导程序的解决方法
【发布时间】：2022-06-23 01:32:38
【问题描述】：

我正在使用引导程序的网站上工作，但实际上我正在尝试将自定义样式应用于活动导航项（更多的是背景，而不仅仅是文本颜色）

但是，为了开始和测试，我只是使用白色文本颜色来让它工作，到目前为止我还没有运气。

我已经包含了 JS，但基本上我正在尝试将一个类应用于任何活动项目的导航项目 (li) 链接 (a) 中的跨度标记。

我到底做错了什么？我已经为每个订单项链接应用了一个空跨度，这是我希望班级为活动项目去的地方

$(document).ready(function () {
    $('ul.navbar-nav > li.nav-item > a.nav-link')
            .click(function (e) {
        $('ul.navbar-nav > li.nav-item > a.nav-link > span')
            .removeClass('active-pill');
        $(this).addClass('active-pill');
    });
});

a.active-pill{
    color: white;
}
.nav-link{
    color:black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
        integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
        crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    
        
<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#"><span class="active-pill">Home</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#"><span>Contact</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#"><span>FAQs</span></a>
    </li>
</ul>

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

我认为，如果您只是使选择器更具体，它应该可以工作。

a.active-pill{color: white}

基于在本地运行它似乎来自 .nav-link 的颜色具有优先权，因此针对特定将解决该问题。

【讨论】：