如何使用 CSS 和 jQuery 來突出顯示當前頁面連結？

使用 CSS 區分當前頁面連結

在網頁設計領域，通常需要以不同於其他頁面的方式突出顯示與當前頁面相對應的連結。這可以增強導航可見性並提供頁面位置的清晰指示。

考慮以下範例：

<code class="html"><ul id="navigation">
  <li class="a"><a href="/">Home</a></li>
  <li class="b"><a href="theatre.php">Theatre</a></li>
  <li class="c"><a href="programming.php">Programming</a></li>
</ul></code>

要使用CSS 來實現所需的效果，我們可以將 定位為

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

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

;

中的元素容器：

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

此程式碼對頁面上的所有連結套用不同的顏色和懸停效果。但是，為了突出顯示當前頁面鏈接，我們可以使用 jQuery：

此腳本會迭代所有具有 href 屬性的鏈接，並檢查鏈接的 URL 是否與當前頁面的 URL 匹配。如果是這樣，它會向連結添加一個「活動」類，可以根據需要設定樣式。

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

以下 CSS 可用於設定活動連結的樣式：

透過組合CSS 和 jQuery，您可以輕鬆地為目前頁面連結建立視覺區分，增強使用者體驗和網站導覽。

以上是如何使用 CSS 和 jQuery 來突出顯示當前頁面連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！