单击时，我正在尝试在我的网站上的导航栏项目中添加一个活动类

Posted 2023-02-23

【中文标题】单击时，我正在尝试在我的网站上的导航栏项目中添加一个活动类

【英文标题】：I am trying to add an active class to my nav bar items on my website when clicked

【发布时间】：2022-01-23 05:34:03

【问题描述】：

我想在我的网站上将活动类添加到我单击的导航栏项目。在我的 JS 代码中，它告诉程序要查看哪个类（“nav-item”）。然后它告诉我的程序从当前活动类中删除活动类，然后将活动类添加到单击的类中。我假设逻辑是正确的，但我很可能错过了语法。我是 html 和 JS 的新手，因此我们将不胜感激。

HTML 代码：

<ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger active" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
                </ul>

JS代码：

$('.nav-item').on('click', '.nav-link js-scroll-trigger', function () 
        $('.nav-link js-scroll-trigger active').removeClass('active');
        $(this).addClass('active');
    );

【问题讨论】：

这能回答你的问题吗？ How can I select an element with multiple classes in jQuery?

不完全是。我的网站，使用上面的代码，只突出显示关于部分，当你点击其他部分时不会改变。我不知道如何用 JS 代码解决这个问题。

【参考方案1】：

$(document).ready(function()
  $('.nav-link').click(function()
    $('.nav-link').removeClass("active");
    $(this).addClass("active");
);
);

$(document).ready(function()
  $('.nav-link').click(function()
    $('.nav-link').removeClass("active");
    $(this).addClass("active");
);
);

.active
color:yellow;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger active" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
                </ul>