如何使用 CSS 和 jQuery 更改目前頁面連結的顏色？

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

將當前頁面的連結樣式設定為與其他頁面不同是很常見的Web 開發中的任務。實現此目的的一種方法是使用 CSS 和 jQuery。

使用CSS

要設定目前頁面上的連結樣式，您可以使用以下CSS：

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

此程式碼會將頁面上所有連結的顏色變更為#A60500。當滑鼠懸停在連結上時，其顏色將變更為#640200，其背景顏色將變更為#000000。

使用 jQuery

您也可以使用 jQuery變更目前頁面的連結顏色。為此，您可以使用以下程式碼：

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

此程式碼將循環訪問頁面上的所有鏈接，並將「active」類別新增至與目前頁面 URL 匹配的連結。然後，您可以使用 CSS 以不同的方式設定「活動」類別的樣式，例如變更其顏色。

注意： jQuery 程式碼可能需要根據頁面的結構進行修改，並且正在使用的連結。您可能需要縮小連結的選擇範圍或刪除 URL 參數，以確保正確的連結樣式。

以上是如何使用 CSS 和 jQuery 更改目前頁面連結的顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！