添加活動類以鏈接到當前頁面

我正在嘗試為頁面上各種選單的所有鏈接添加一個類，以便在加載相關頁面時激活活動狀態。

HTML

<div id = "content">
  ...
  <div class = "menu-item">
    <a href="/page1/" class="menu-link"> Page1 </a>
  </div>
  ...
</div>

JS

<script>
  jQuery (function ($) {
      var pgurl = window.location.href.substr (window.location.href.lastIndexOf ("/")   1);
        $ (". menu-item> a"). each (function () {
        if ($ (this) .attr ("href") == pgurl || $ (this) .attr ("href") == '')
        $ (this) .addClass ("active");
        // $ (this) .parent ("li"). addClass ("active");
      })
  });
</script>

我也嘗試過其他腳本，但它們不起作用。

我認為問題與 HREF URL 有關。

在 HTML 中，我傳遞了一個類似 /page1/ 的值，但在 WordPress 中，正確的永久鏈接是 /parent/page1/。

如何修復和改進腳本？

uj5u.com熱心網友回復：

您可以使用您的真實網址測驗此代碼。

檢索 url、頁面和選單項 url 的最后一個有效“單詞”（在\abc\page1is page1或 in \xyz\page1\is 中page1）。最后，我將兩者進行比較。

還有一件事要做，洗掉所有哈希 ( url\page#abc) 和引數 ( url\page?Param=value)

jQuery(function($) {
  var window_location_href = 'http://your.site.com/parent/page2/';
  window_location_href = window_location_href.endsWith('/') ? window_location_href.substr(0, window_location_href.length - 1) : window_location_href;
  var pgurl = window_location_href.substr(window_location_href.lastIndexOf("/")   1);


  $(".menu-item > a").each(function() {
    var thisPage = $(this).attr("href");
    thisPage = thisPage.endsWith('/') ? thisPage.substr(0, thisPage.length - 1) : thisPage;
    thisPage = thisPage.substr(thisPage.lastIndexOf("/")   1);

    if (thisPage == pgurl)
      $(this).addClass("active");
  });

});

.menu-link {
  color: blue;
  display: block;
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  ...
  <div class="menu-item">
    <a href="/complexPath/parent/page1/" class="menu-link"> Page1 </a>
    <a href="/complexPath/parent/page2/" class="menu-link"> Page2 </a>
    <a href="/complexPath/parent/page3/" class="menu-link"> Page3 </a>
  </div>
  ...
</div>

編輯

更清楚地說，真正的結束代碼是這樣的：

jQuery(function($) {
  var window_location_href = window.location.href;
  window_location_href = window_location_href.endsWith('/') ? window_location_href.substr(0, window_location_href.length - 1) : window_location_href;
  var pgurl = window_location_href.substr(window_location_href.lastIndexOf("/")   1);


  $(".menu-item > a").each(function() {
    var thisPage = $(this).attr("href");
    thisPage = thisPage.endsWith('/') ? thisPage.substr(0, thisPage.length - 1) : thisPage;
    thisPage = thisPage.substr(thisPage.lastIndexOf("/")   1);

    if (thisPage == pgurl)
      $(this).addClass("active");
  });

});

uj5u.com熱心網友回復：

根據 Wordpress 代碼參考頁：wp_nav_menu()#menu-item-css-classes，將下面的類添加到與當前呈現的頁面對應的選單項中。

• .current-menu-item

所以，基本上你可以做的就是為wordpress自動生成的類名添加相應的css：

.current-menu-item {
    color: red; // change the color of the current active page to #red;
}
.current-menu-parent {
    // current active menu's parent styles
}

你不需要使用 jQuery。

uj5u.com熱心網友回復：

請試試：

<script>
  jQuery(function($){  var cururl = window.location.href;                
  const urlarray = cururl.split("/");
var last = urlarray[urlarray.length-2]);
      
        $(".menu-item> a").each(function() {
       var pageurl = $(this).attr("href"); if(pageurl.indexOf(last) > -1){
        $(this).addClass("active");
        // $ (this).parent ("li").addClass ("active"); }
      })
  });
</script>

標籤：jQuery css WordPress

上一篇：如果我需要它的孩子，jQuery如何替換:last選擇器？

下一篇：JavaServlet/JSP-無法訪問會話屬性