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

使用CSS 突出顯示當前頁面連結

問題：

問題：

如何更改樣式當前頁上的連結以將其與其他頁面區分開來？具體來說，我想交換文字和背景顏色。

li a {
  color: #A60500;
}

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

CSS 解決方案：

<ul>

範例：

Script

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

要自動套用活動樣式，可以使用jQuery 的.each 函數：

<ul>

注意事項：

為了更精確的連結選擇，請考慮使用「nav」等類屬性[ href]"。

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

如果您的URL包含查詢參數，請考慮使用以下方式剝離它們：

此方法無需手動修改每個頁面，並確保跨頁面的樣式一致不同的頁面 URL。

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