用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

转载于:https://www.cnblogs.com/telfair66/p/4704685.html