如何使用 JavaScript 將活動導航類別動態新增到我的網站選單？

在選單中新增動態活動導覽類別

導覽網頁時，通常會反白與目前頁面對應的活動選單項目。這透過為網站層次結構中的目前位置提供視覺提示來改善使用者體驗。

為了實現此功能，我們將利用JavaScript 來識別當前URL 並添加活動導航類別

如何使用JavaScript 新增活動導航類別

讓我們來研究一下使用jQuery強大功能的解決方案庫：

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

說明：

• 當文件準備好時，腳本初始化。
• location.pathname 屬性擷取目前頁面的路徑。
• 它迭代每個選單項目的錨標記($('#nav li a'))。
• 對於每個錨標記，它使用 indexOf() 函數檢查其 href 屬性是否包含當前路徑。
• 如果找到匹配時，相應的錨標記被分配為「active」類別。

重要注意：

如果選單包含指向同一頁面的多個鏈接，此方法可能無法準確確定活動項目。在這種情況下，可能需要額外的邏輯來處理這些情況。

以上是如何使用 JavaScript 將活動導航類別動態新增到我的網站選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！