單擊時將活動類添加到導航欄元素

我用導航欄創建的，我沒有做過太多的網路開發。

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
    </ul>
  </div>
</nav>

此導航欄鏈接到所有其他頁面的頂部，以減少代碼重復。有人可以幫我撰寫代碼，以便在單擊選單項時將“活動”類添加到 li 元素中。然后這會觸發 css。

CSS：

.nav-link.active {
  color: white;
}

謝謝

uj5u.com熱心網友回復：

這是您在純 JavaScript 中的要求的確切完整代碼。希望它會有所幫助

const links = document.querySelectorAll('.nav-link');
    
if (links.length) {
  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      links.forEach((link) => {
          link.classList.remove('active');
      });
      e.preventDefault();
      link.classList.add('active');
    });
  });
}

.nav-link.active {
  color: white;
}

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button
      class="navbar-toggler ml-1"
      type="button"
      data-toggle="collapse"
      data-target="#collapsingNavbar2"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div
    class="navbar-collapse collapse justify-content-between align-items-center w-100"
    id="collapsingNavbar2"
  >
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <strong style="text-transform: uppercase">home</strong>
        </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="about.html">
            <strong style="text-transform: uppercase">about</strong>
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="flights.html">
          <strong>FLIGHTS</strong>
        </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="hotels.html">
            <strong>HOTELS</strong>
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="holidays.html">
            <strong>HOLIDAYS</strong>
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="property.html">
            <strong>PROPERTY</strong>
          </a>
      </li>
      <li class="nav-item active">
          <a class="nav-link" href="car_hire.html">
            <strong>CAR HIRE</strong>
          </a>
      </li>
    </ul>
  </div>
</nav>

uj5u.com熱心網友回復：

使用classList和toggle

document.querySelectorAll(".nav-item").forEach((ele) =>
  ele.addEventListener("click", function (event) {
    event.preventDefault();
    document
      .querySelectorAll(".nav-item")
      .forEach((ele) => ele.classList.remove("active"));
    this.classList.add("active")
  })
);

.active {
  color: green;
}

    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
    </ul>

uj5u.com熱心網友回復：

在您的 JS 中添加以下代碼：

 $(".nav-item").click(function() {  
    $(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
    $(this).addClass("active"); // This will add active class in clicked <li>   
  });

標籤：javascript html css html 列表 导航栏

上一篇：將v-if與深層屬性物件一起使用

下一篇：將bash轉換為matlab以在路徑中定義帶有字串變數的檔案