使用 CSS 更改目前頁面連結的顏色

操作目前頁面連結的外觀是常見的 CSS 樣式要求。為了將其與其他頁面連結區分開來，使用者通常喜歡交換文字和背景的顏色。以下是針對您的樣式請求的全面解決方案：

CSS 樣式

要設定目前頁面連結的樣式，請將以下CSS 規則新增至您的樣式表：

li a {
  color: #A60500;
}

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

jQuery 腳本

提供的jQuery 腳本可讓您識別目前頁面連結並動態新增類別：

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

根據您的特定頁面結構，您可能需要最佳化連結選擇器 ($("[href]"))。例如，如果連結包含在 nav 元素中，您可以將選擇範圍縮小到 $("nav [href]")。

如果您的頁面使用URL 參數，您可以在比較連結以確保當前頁面連結被識別：

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

這種方法無需單獨修改每個頁面的CSS 樣式。