首頁 >web前端 >css教學 >如何使用 CSS 和 jQuery 為目前頁面連結設定不同的樣式?

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

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-14 18:58:11422瀏覽

How Can I Style Current Page Links Differently Using CSS and jQuery?

目前頁面的 CSS 連結樣式

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

使用CSS 實作

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

li a {
  color: #A60500;
}

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

範例

考慮以下HTML結構:

<ul>

應用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn