效果如下
复制代码 代码如下:
<DOCTYPE html>
<html>
<head>
<script src=></script>
<meta charset=UTF>
<style>
nav{height:px; width: %;background: #EEE;}
nav ul li{float: left;liststyle: none;marginright: px;lineheight: px;}
nav ul li a{textdecoration: none; display: block;width: px; textalign: center;}
onNav{fontweight: bold;color:#fff; background: #ccc;}
</style>
</head>
<body>
<div class=nav>
<ul>
<li><a # class=onNav>首页</a></li>
<li><a #>博客</a></li>
<li><a #>论坛</a></li>
<li><a #>关于</a></li>
<li><a #>联系</a></li>
</ul>
</div>
<script type=text/javascript>
$(nav ul li a)click(function(){if($(this)has(onNav)){
$(this)addClass(onNav)parent(li)siblings(li)find(a)removeClass(onNav);}})
</script>
</body>
</html>
js部分
复制代码 代码如下:
<script type=text/javascript>
$(nav ul li a)click(function(){if($(this)has(onNav)){ //找到a标签添加click事件判断是否有背景存在
$(this)addClass(onNav)parent(li)siblings(li)find(a)removeClass(onNav);}}) //添加类并移除已有的类
</script>
上面是一种方法以下是另外一种
复制代码 代码如下:
<script type=text/javascript>
$(nav ul li a)click(function(){ //找到a标签并添加click事件
var inx = $(this)parent(li)index(); //定义变量inx返回这个元素在同辈中的索引位置
$(nav ul li)find(a)removeClass(on_nav); //移除已有的类
$(nav ul li)eq(inx)find(a)addClass(on_nav); //获取点击元素并添加类
</script>
