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

结果：

051440178146374.png

注意：如果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>

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

推荐阅读更多精彩内容