顺晟科技：

js类似于:

<div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
    <ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
        <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#skills">Skills</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
        <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                class="fab fa-2x fa-linkedin"></i></a>
    </div>
</div>

我找到了解决所有3个问题的方法。

• 当单击导航项时，活动类将发生更改
• 当页滚动到页节时，活动类会发生变化
• 当a link类处于活动状态时，navbar项链接的textContent会更改

JavaScript

<div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
    <ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
        <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#skills">Skills</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
        <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                class="fab fa-2x fa-linkedin"></i></a>
    </div>
</div>

HTML

<div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
    <ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
        <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#skills">Skills</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
        <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                class="fab fa-2x fa-linkedin"></i></a>
    </div>
</div>

每个页面节也有适当的ID。

希望这有助于其他有同样问题的人。