Jquery給當前頁或者跳轉後頁面的導覽列添加選中後樣式

標籤：c   style   class   code   java   a   

解決方案有兩種：一種是直接給當前頁面添加特殊樣式，當網頁重新整理或者跳轉到下一頁後，樣式消失；另一種情況是即使重新整理頁面後樣式仍然有效。

直接上代碼：

第一種情況：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script type="text/javascript" src="templets/js/jquery.js"></script>  <script type="text/javascript">  $(document).ready(function(){      $(".nav a").each(function(){          $(this).click(function(){              $(".nav .hover").removeClass("hover");              $(this).addClass("hover");                return false;//防止頁面跳轉          });      });  });  </script>      <div class="nav">  <ul>      <li><a href="1.html" class="hover"> 首頁</a></li>      <li><a href="2.html"> 設定檔</a></li>      <li><a href="3.html"> 我的好友</a></li>      <li><a href="4.html"> 訊息管理</a></li>   </ul>     </div>

 

第二種情況：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script type="text/javascript" src="templets/js/jquery.js"></script>  <script type="text/javascript">  $(document).ready(function(){      $(".nav a").each(function(){          $this = $(this);          if($this[0].href==String(window.location)){              $this.addClass("hover");          }      });  });  </script>      <div class="nav">  <ul>      <li><a href="1.html"> 首頁</a></li>      <li><a href="2.html"> 設定檔</a></li>      <li><a href="3.html"> 我的好友</a></li>      <li><a href="4.html"> 訊息管理</a></li>   </ul>     </div>