如何使用 CSS 和 jQuery 在導覽功能表中突出顯示目前頁面連結？

如何使用CSS 和jQuery 更改當前頁面的鏈接顏色

問題：

如何更改連結的文字和背景顏色以突出顯示導航中的當前頁面選單？

CSS 解決方案：

對於基本樣式，CSS 提供li 一個選擇器來定位列表項目內的所有連結：

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

然而，這種方法並不能區分目前頁面連結。

jQuery解決方案：

要動態突出顯示當前頁面鏈接，可以使用jQuery 的.each 函數：

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

此程式碼會迭代所有鏈接，檢查它們的href 是否與當前頁面匹配頁面URL，並新增「活動」類別以符合預先定義

注意事項：

• 使用CSS 選擇器（如$("nav [href]" )）縮小連結選擇範圍。
• 透過剝離URL 參數來處理它們this.href.split("?")[0].
• 這種方法可以讓您避免在每個頁面上手動更改並保持鏈接樣式的一致性。

以上是如何使用 CSS 和 jQuery 在導覽功能表中突出顯示目前頁面連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！