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

總結

以上是生活随笔為你收集整理的jQuery 分类导航菜单条点击变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。