使用jQuery將活動類添加到導航中的當前頁面

Question

我正在嘗試在標題的當前頁面導航鏈接中添加“活動”類。 我取得了一些進展，但是遇到了一個小錯誤，希望對您有所幫助。 我知道答案很明顯，但是，我是jQuery / Java的新手，我很難自行找到它。

這是我的導航HTML結構：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="/" class="nav-link">Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/work">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/play">Play</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
</nav>

很簡單。 這是jQuery代碼：

$(function() {
  $('nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

該代碼在內部頁面上有效，但是，我遇到了一個問題，其中在主頁（'Me'，href =“ /”）上，代碼將活動類添加到所有導航鏈接。

我認為，如果我使用href =“ / work /”（在所有鏈接的末尾添加/），則該問題將得到解決，但是，當我這樣做時，這些鏈接將不再起作用，因為該站點隨后嘗試轉到www.sitename.com/work/.php。

這是一個簡單的.htaccess或jQuery修復程序，但是我不確定哪個修復程序或如何實現它。

謝謝！

Answer 1

發生這種情況是因為您使用的是^ =選擇器。 這意味着'startWith'，因此，由於所有網址都以'/'開頭，因此將'active'類添加到所有網址中。

用相等的選擇器替換它，它應該可以工作。

$('nav li a[href="/' + location.pathname.split("/")[1] + '"]').addClass('active');

Answer 2

一種更簡單的方法是將鏈接的href屬性與頁面網址進行比較

$('nav li a').filter(function(){
  return this.href === location.href;
}).addClass('active');

盡管href 屬性僅包含路徑，但DOM中的href 屬性包含完整網址