用Jquery来控制A标签的class,以达到控制其样式

用JQuery控制A标签的class,以达到控制其样式

 
HTML:
<span class="nav">
                    <ul id="getClass">
                        <li><a   id="account-filter">账号</a></li>
                        <li><a   id="role-filter" >角色</a></li>  
                        <li><a   id="device-filter">设备</a></li>  
                    </ul>
</span>
 
CSS:
<style type="text/css">
        .on1{ background:red;}
</style>
 
JS:
<script type="text/javascript" src="js/jquery.js"></script>
<script>
  $(function(){   
    $("#getClass li a").click(function(){        
             $(this).addClass("on1").parent().siblings().find("a").removeAttr("class");
         });
  })
</script>
 
 结果:
 
 
注意:如果a标签设置 href 属性跳转, 重新刷新页面,丢失样式,可以考虑如下脚本
<script type="text/javascript" src="js/jquery.js"></script>
<script>
  $(function(){

    $(".nav a").each(function(){
      $this = $(this);
      if($this[0].href==String(window.location)){ 
      $this.addClass("current");
      }
    });

  })
</script>
 
参考原文:http://www.2cto.com/kf/201311/257624.html
posted @ 2015-08-05 14:44  telfair  阅读(2978)  评论(0编辑  收藏  举报