效果如下
復制代碼 代碼如下:
<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>
From:http://tw.wingwit.com/Article/program/Java/Javascript/201404/30464.html
