用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>
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/244d667bdcc6ecd6426f9db082b2d0f9.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>
参考原文:http://www.2cto.com/kf/201311/257624.html