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

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

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

CSS 樣式

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

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

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

jQuery 腳本

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

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

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

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

<code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

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

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