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>
