如何获得'；主动'；在Bootstrap4中使用Javascript和简单的php站点

简单的三页站点，使用bootstrap4框架。我正在使用includes将header.php和footer.php拉入下面的php页面。我不知道如何将引导“active”类添加到用户当前查看的页面的当前导航项中。我是javascript新手，但在堆栈中找到了下面的javascript，但它似乎不起作用。网站上没有html错误，在web开发人员工具的控制台上也没有显示错误。所有js脚本都加载正常

index.php、about.php、faq.php

header.php中的导航代码

        <header>
            <!-- Fixed navbar -->
            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark navbar-custom">
                <div class="container">
                    <a class="navbar-brand d-none d-md-block" href="http://www.example.com">Example</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                      <ul class="navbar-nav ml-auto justify-content-end">
                        <li class="nav-item">
                          <a class="nav-link" href="index.php">Home</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="about.php">History</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="faq.php">FAQ</a>
                        </li>
                      </ul>
                    </div>
                </div>
            </nav>
        </header>

css

问题在于：

    $('.navbar-dark .navbar-nav .nav-link').each(function(){
  // There is no need to use find('a') since you already pointing to the hrefs
  var href = $(this).find('a').attr('href');

应该是：

    $('.navbar-dark .navbar-nav .nav-link').each(function(){
  // select href
  var href = $(this).attr('href');

---

使用：

$（'.navbar dark.navbar nav.nav link'）

，您已经在引用作为HREF的navlinks，因此无需使用运行良好的

.find（'a'）

。经过多次努力，我现在看到了简单的错误，学到了一些新东西。非常感谢。

    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link.active {
        color: rgb(254, 150, 0);
        text-decoration: underline;
    }

    $('.navbar-dark .navbar-nav .nav-link').each(function(){
  // There is no need to use find('a') since you already pointing to the hrefs
  var href = $(this).find('a').attr('href');

    $('.navbar-dark .navbar-nav .nav-link').each(function(){
  // select href
  var href = $(this).attr('href');