jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav li").first().addClass("current");
$(".nav li").click(function(){
$(this).addClass("current").siblings().removeClass("current")
});
});
</script>
<style type="text/css">
ul.nav {
width:980px;
margin:0px auto;
}
ul.nav li {
width:81px;
height:34px;
line-height: 34px;
float:left;
text-align: center;
margin-right:20px;
}
ul.nav li a {
font-size: 15px;
font-weight: bolder;
color: #90e313;
}
ul.nav li.current {
background-image: url(images/blog_nav_iterm.gif);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul.nav li.current a { color: #FFF; }
</style>
<ul class="nav">
<li><a href="#">网站主页</a></li>
<li><a href="#">分类目录</a></li>
<li><a href="#">文章归档</a></li>
<li><a href="#">关于本站</a></li>
</ul>