在引导导航栏中更改活动类但使用不同的 ul s

Question

我正在创建一个（非专业）项目来练习我的编码技能。我正在将引导程序用于某些事情，包括导航栏。但我想更改活动类（导航项目在不同的 ul 中）

我已经尝试了通过谷歌搜索“在引导程序中更改活动类”找到的基本方法，但我的 html 代码与任何人都不相似。我曾尝试使用唯一的类名，使当前处于活动状态，但这会破坏代码。所以我必须使用活动课程。感谢所有的帮助，谢谢。

https://github.com/Carbonautics/carbonautics.github.io 这是我在 github.com 上的代码

我希望它根据点击以及用户正在查看的内容更改活动类（例如：如果用户在主页上，主页为活动，如果用户向下滚动到关于页面，则为活动）。

片段：https://codepen.io/carbonautics/pen/oKvgWK

<div class="collapse navbar-collapse w-100" id="navLinks">
        <ul class="navbar-nav w-100 justify-content-center" id="activeLink">
            <li class="nav-item active">
                <a href="https://carbonautics.github.io" class="nav-link">home</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item hover" id="hoverbtn">
                <a href="#About Me" class="nav-link">about</a>
            </li>
            <li class="nav-item hover">
               <a href="" class="nav-link">progress</a>
            </li>
        </ul>
    </div>

我知道如何使用演示和东西，这是我的第一个问题，对不起，伙计们。 如果您看到 codepen，我希望主页（活动）位于中心，并在单击时更改类，或者如果用户当前向下滚动到关于我的页面。

Answer 1

您是否尝试过在单击事件后使用 jQuery addClass 添加自定义类？ 比如：$( "p" ).addClass( "yourClass" );