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

使用CSS 自訂目前頁面的連結樣式

Web 開發人員通常希望將目前頁面上的連結外觀與其他頁面區分開來。一種常見的方法是交換文字和背景顏色。

要使用 CSS 來實現此效果，請考慮以下方法：

li a {
  color: #A60500;
}

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

此程式碼確保網頁上的所有連結都有一個紅色 (#A60500) 文字顏色。當使用者將滑鼠懸停在連結上時，其文字顏色會變為黑色 (#640200)，背景也會變為黑色 (#000000)。

在HTML 中，建立一個包含多個連結的導覽選單：

或者，您可以使用jQuery 動態新增一個類別到目前頁面link:

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

此腳本迭代頁面上的所有鏈接，並將活動類別新增至與目前URL 匹配的類別。然後可以使用 CSS 以不同的方式設定活動連結的樣式，從而允許您自訂目前頁面連結的外觀。

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