如何在 CSS 中設定目前頁面連結的樣式？

在CSS 中設定目前頁面連結的樣式：綜合指南

設計人員通常會透過區分目前頁面的連結來增強使用者體驗其他，突出其活躍狀態。實現這一目標的一種有效方法是透過 CSS，提供靈活性和輕鬆的自訂。

為了改變當前頁面連結的外觀，CSS 提供了一個簡單但功能強大的解決方案：

<code class="css">a:active {
  color: #A60500;
  background-color: #000000;
}</code>

在此程式碼中，目前活動的連結將在黑色背景上顯示為紅棕色文字顏色。這種視覺差異可以幫助使用者更直觀地瀏覽網站。

對於更進階的修改，jQuery 提供了更好的控制。透過利用.each 函數，您可以迭代所有鏈接，並將活動類動態應用到與當前頁面URL 匹配的鏈接：

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

此代碼確保活動類僅添加到鏈接對應於當前頁面，無論使用的頁面結構或特定URL。

要進一步細化連結的選擇，請考慮使用更具體的選擇器，例如 $("nav [href]") 如果您的連結位於導航元素內。此外，如果您的 URL 包含參數，您可能需要在比較 URL 之前刪除它們以考慮這些變更。

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