嘗試在wordpress的新頁面上添加活動類。

Question

嘗試將活動類添加到wordpress中新頁面上的自定義導航中。 這是一個真正的自定義html欄，通過wp-admin面板無法完成任何操作。

<nav class="navbar navbar-default hidden-xs" id="mainnav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href="/">
            <img style="max-width:100px;" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/BB-logo@2x.png"" class="img-responsive">
        </a>
        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="nav-links active" href="/about-us/">About</a></li>
                <li><a class="nav-links" href="/programs/">Programs</a></li>
                <li><a class="nav-links" href="/partners/">Partners</a></li>
                <li><a class="nav-links" href="/media/">Media</a></li>
                <li><a class="nav-links" href="/portfolio-lander/">Portfolio</a></li>
                <li><a class="nav-links" href="/gallery/">Gallery</a></li>
            </ul>
        </div>

    </div>
</nav>

我嘗試使用javascript實現此功能，但似乎無濟於事。 這似乎是使用選項卡的標准做法，但是，我需要使用不同的頁面（本質上，看起來我需要存儲活動類的值？）。

這是我的JS

jQuery(document).ready(function ($) {
  $(".current-menu-item").addClass("active");
  console.log("current Menu item");
});

努力弄清楚這一點。

Answer 1

使用CSS更改當前頁面的鏈接顏色

此頁面上有兩個腳本，聽起來其中一個可能適合您：

使用jQuery，您可以使用.each函數通過以下代碼迭代鏈接：

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

根據您的頁面結構和使用的鏈接，您可能必須縮小鏈接的選擇范圍，例如：

$("nav [href]").each ...

如果您使用URL參數，則可能有必要去除這些參數：

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

這樣，您不必編輯每個頁面。

這是另一種可能也適用於您的方法：

獲取文檔中的所有鏈接，並將它們的參考URL與文檔的URL進行比較。 如果存在匹配項，則將一個類添加到該鏈接。

<script>
    currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
    currentLinks.forE‌​ach(function(link) {
        link.className += ' active')
    });
</script>