如何设置Bootstrap Navbar活动类

Question

我正在使用Bootrstap 4，我不知道为什么我的活动类不工作。我已经学习了一些例子和文档，但是我仍然有一些问题，弄清楚为什么它不起作用。我的head标记包含jquery，然后是popper，然后是index.html中的引导程序。

COMPONENT.HTML

​

<!--COMPONENT.HTML-->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop"
        aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTop">
        <ul class="nav navbar-nav w-100">
            <li class="nav-item ml-4">
                <a class="nav-link active" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item ml-4">
                <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="/landscaping">Landscaping</a>
            </li>
            <li class="nav-item ml-4">
                <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="/fences-decks">Fences & Decks</a>
            </li>
            <li class="nav-item ml-4">
                <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="/sprinkler">Sprinklers</a>
            </li>
            <li class="nav-item ml-4">
                <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="/remodeling">Remodeling</a>
            </li>
            <li class="nav-item ml-4">
                <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="/concrete">Concrete</a>
            </li>
            <!-- <li class="nav-item ml-4">
                <a class="nav-link" routerLink="/reviews">Google Reviews</a>
            </li> -->
            <li class="nav-item ml-4">
                <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show"
                    routerLink="/about">About</a>
            </li>
            <br>
            <div class="text-right ml-auto">
                <li class="nav-item">
                    <a class="nav-link text-info" data-toggle="modal" data-target="#emailForm"><span class="material-icons lightgrey">email</span> user@email.com</a>
                    
                </li>
                <li class="nav-item">
                    <a class="nav-link text-info" href="tel:1-801-759-4477"><span class="material-icons lightgrey">phone_in_talk</span> 801-759-4477</a>
                    
                </li>
            </div> 
        </ul>   
        <script> 
            $("#navbarTop .nav .nav-item").on("click", function(){
           $(".nav-link").find(".active").removeClass("active");
           $(this).addClass("active");
            });
          </script>
    </div> 
</nav>

​

Answer 1

​

$(document).ready(function() {
  $(".nav-item a").click(function() {
    let active = $(".active-nav-item")
    if (active) {
      $(active).removeClass("active-nav-item");
      $(this).parent().addClass("active-nav-item");
    }
  })
})

#topbar {
  .topbar-social-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    .topbar-social-list-item {
      cursor: pointer;
      transition: all 0.3s;
      i {
        transition: all 0.3s;
      }
      & i:hover {
        transition: all 0.3s;
        color: white !important;
      }
    }
  }
}

.nav-sec {
  background-color: rgb(14, 13, 13) !important;
  .dropdown {
    &:hover {
      .dropdown-menu {
        display: block; // left: -10px; border-radius: 0% !important; } } } .nav-list{ .nav-list-item{ transition: all 0.3s; &:hover{ transition: all 0.3s; background-color:
        red !important;
        a {
          color: blue !important;
        }
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="topbar" class="bg-dark">
  <div class="container">
    <div class="row">
      <div class="col d-flex p-2">
        <div class="topbar-mail me-3">
          <i class="fa-solid fa-envelope text-danger"></i>
          <span class="text-secondary">
                                    info@example.com
                                </span>
        </div>

        <div class="topbar-phone">
          <i class="fa-solid fa-mobile text-danger"></i>
          <span class="text-secondary">
                                    +1 5589 55488 55
                                </span>
        </div>
      </div>
      <div class="col d-flex justify-content-end">
        <ul class="topbar-social-list align-items-center">
          <li class="topbar-social-list-item">
            <i class="fa-brands fa-twitter text-secondary text-center me-3"></i>
          </li>
          <li class="topbar-social-list-item">
            <i class="fa-brands fa-facebook text-secondary text-center me-3"></i>
          </li>
          <li class="topbar-social-list-item">
            <i class="fa-brands fa-instagram text-secondary text-center me-3"></i>
          </li>
          <li class="topbar-social-list-item">
            <i class="fa-brands fa-linkedin text-secondary text-center me-3"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark nav-sec p-0">
  <div class="container">
    <a class="navbar-brand fs-2 fw-bold" href="#">DAY</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>
    <div class="collapse navbar-collapse justify-content-end nav-list" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item nav-list-item p-lg-3 active-nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item nav-list-item p-lg-3">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item nav-list-item p-lg-3">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item nav-list-item dropdown p-lg-3">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                              Dropdown link
                            </a>
          <ul class="dropdown-menu mt-3" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item nav-list-item p-lg-3">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>

    </div>

  </div>
</nav>

​