Jquery给当前页或者跳转后页面的导航栏添加选中后样式代码实例

第一种情况：

<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>

第二种情况：

<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>