点击导航栏使当前栏目背景变色
分类：实例代码
点击导航栏使当前栏目背景变色属于前端实例代码，有关更多实例代码大家可以查看。
很多导航菜单为提高辨识度，会在点击的导航栏施加一些特别的样式。
最为常见的是背景变色效果，下面介绍一下如何利用jQuery实现此效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box li{
width:100px;
height:30px;
text-align:center;
line-height:30px;
list-style:none;
float:left;
margin-left:5px;
background-color:#F60;
}
#box li a{
display:block;
text-decoration:none;
color:#000;
}
#box .hover{background-color:#60C;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box li").click(function(){
$(this).addClass("hover").siblings().removeClass("hover");
});
});
</script>
</head>
<body>
<ul id="box" style="overflow:hidden">
<li><a href="#">前端教程网一</a></li>
<li><a href="#">前端教程网二</a></li>
<li><a href="#">前端教程网三</a></li>
<li><a href="#">前端教程网四</a></li>
<li><a href="#">前端教程网五</a></li>
<li><a href="#">前端教程网六</a></li>
</ul>
</body>
</html>
当前点击的导航栏设置为指定颜色，其他的导航栏目背景色则恢复原样，下面介绍一下它的实现过程。
一.实现原理：
原理非常简单，为每一个li元素注册click事件处理函数，此函数可以为点击的li添加样式类hover，然后将它的兄弟li元素上添加的hover删除，这样就实现了保证只有一个li元素会被设置为特别背景色。
二.相关阅读：
（1）.click事件参阅jQuery click事件一章节。
（2）.addClass()方法参阅jQuery addClass()一章节。
（3）.siblings()方法参阅jQuery siblings()一章节。
（4）.removeClass()方法参阅jQuery removeClass()一章节。
点击导航栏使当前栏目背景变色，这样的场景在实际项目中还是用的比较多的，关于点击导航栏使当前栏目背景变色就介绍到这了。