Как стать «активным» в Bootstrap 4, используя Javascript с простым сайтом php

Question

Простой трехстраничный сайт с использованием фреймворка Bootstrap 4.Я использую include для загрузки header.php и footer.php на страницы php ниже.Я не могу понять, как добавить «активный» класс начальной загрузки к текущему элементу навигации для страницы, которую пользователь просматривает в данный момент.Я новичок в javascript, но нашел javascript ниже в стеке, но, похоже, он не работает.На сайте нет ошибок в формате html и не отображаются ошибки на консоли в инструментах для веб-разработчиков.Все 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>

код из footer.php

        <footer class="footer">
        </footer>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
        <script src="assets/js/vendor/popper.min.js"></script>
        <script src="dist/js/bootstrap.min.js"></script>
        <script src="js/custom.js"></script>
      </body>
    </html>

custom.js

    $(document).ready(function() {

     // Get current page URL
     var url = window.location.href;

     // remove # from URL
     url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));

     // remove parameters from URL
     url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));

     // select file name
     url = url.substr(url.lastIndexOf("/") + 1);

     // If file name not avilable
     if(url == ''){
     url = 'index.php';
     }

     // Loop all menu items
     $('.navbar-dark .navbar-nav .nav-link').each(function(){

      // select href
      var href = $(this).find('a').attr('href');

      // Check filename
      if(url == href){

       // Add active class
       $(this).addClass('active');
      }
     });
    });

css

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

Answer 1

Проблема здесь:

    $('.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'), вы уже ссылаетесь на навигационные ссылки, которые являются hrefs, так чтоНет необходимости использовать .find('a').