如何動態改變目前頁面的連結顏色？

更改目前頁面的連結顏色

修改目前正在查看的頁面的連結外觀可以透過提供以下功能來增強使用者體驗：視覺線索。一種常見的技術是交換文字和背景的顏色，以使當前連結脫穎而出。

要實現這種效果，可以使用 CSS 和 JavaScript。 CSS 定義所需的連結外觀，而 JavaScript 動態識別目前頁面並相應地套用樣式。

以下是實現此解決方案的方法：

1. CSS 樣式：

   • 所有定義連結的基本樣式：

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

   • 指定活動連結的樣式：

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

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

   • $("nav [href]").each ...:

   • 使用.each 函數迭代鏈接：

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

（可選）縮小鏈接選擇範圍：

如有必要，處理URL 參數： 透過實作此解，目前頁面連結將在視覺上與其他頁面連結區分開來，為用戶提供清晰的指示。

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