如何使用 CSS 和 jQuery 對目前頁面連結設定不同的樣式？

使用 CSS 設定不同的當前頁面連結樣式

在網站中導航時，在視覺上區分當前頁面與其他頁面可以增強使用者體驗。本文探討了一種 CSS 解決方案來更改目前活動頁面的連結顏色。

考慮以下HTML 結構：

<ul>

首先，我們將使用CSS 來設定所有連結的樣式:

li a {
  color: #A60500;
}

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

現在，讓我們解決目前頁面連結的CSS 問題。使用 jQuery，我們可以遍歷所有連結並檢查它們的 href 屬性是否與目前頁面的 URL 相符：

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

加上此操作，指向當前頁面的連結將接收「active」類別。然後，我們可以增強CSS 以更改具有該類別的元素的連結顏色：

.active {
  color: #FFEE00;
}

但是，請務必注意以下注意事項：

<ul>

取決於頁面結構，可能需要縮小連結選擇範圍。

如果使用 URL 參數，可能需要剝離它們以確保準確匹配。

以上是如何使用 CSS 和 jQuery 對目前頁面連結設定不同的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！