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

目前頁面的 CSS 連結樣式

在網頁設計領域，樣式連結通常是增強使用者體驗和網站美學。如果您希望將當前頁面的連結外觀與其他頁面區分開來，CSS 提供了一個簡單的解決方案。

使用CSS 實作

新增以下CSS 規則將允許您可以交換目前連結的文字和背景顏色頁面：

li a {
  color: #A60500;
}

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

範例

考慮以下HTML結構：

應用CSS 規則後，當前頁面的連結當頁面載入或使用者將滑鼠懸停在頁面（例如「/programming.php」）上時，文字和背景顏色將交換

使用jQuery 進行動態樣式

如果您喜歡更動態的方法，jQuery提供以下程式碼來實現類似的結果：

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

此程式碼循環訪問頁面上的所有鏈接，並向與當前 URL 匹配的鏈接添加“活動”類。然後，您可以使用 CSS 根據需要設定「活動」類別的樣式。

透過利用這些技術，您可以輕鬆更改當前頁面的連結外觀，從而提高網站的視覺吸引力和用戶體驗.

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