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>

转载于:https://www.cnblogs.com/xuweili/articles/3963005.html