jquery css 主菜单样式的跳转

想要实现的效果事实上是挺常见的那种：网页的主菜单一開始有一种默认的样式（如A样式），当鼠标经过某一菜单项时。此菜单项会套用一种样式（如B样式），当鼠标点击某一菜单项时。当前菜单项会套用B样式，其余菜单项会去掉B样式而套用默认的A样式。经过尝试，写出了比較简单的代码，存下来，以备后用。

原文件下载： http://download.csdn.net/detail/laoyaotask/8065707
html代码：

<div id="menuBar">
<ul>
<li>Home</li>
<li>Download</li>
<li>Documentation</li>
<li>Community</li>
<li>Success Stories</li>
<li>News</li>
<li>Events</li>
<li>About</li>
</ul>
</div>

css代码：

#menuBar
{
clear:both;
width:1200px;
margin:0 auto;
color:#efefef;
font-family:Arial;
font-size:18px;
}
#menuBar ul
{
list-style:none;
height:55px;
margin:0px;
padding:0px;
}

.beforeClick
{
float:left;
width:150px;
text-align:center;
line-height:55px;
height:55px;
background-image:url(Welcome%20to%20Python.org_files/20141021190636.png);
background-repeat:repeat-x;
margin-top:10px;
}
.beforeClick:hover
{
background-color:3776ab;
border:1px solid #aaa;
height:53px;
line-height:53px;
width:148px;
background-image:none;
cursor:pointer;
}

.clickedMenu
{
background-color:3776ab;
border:1px solid #aaa;
height:53px;
line-height:53px;
width:148px;
background-image:none;
cursor:pointer;
}

js代码：

<script>
$(function(){
$("#menuBar ul li").each(function() {
$(this).addClass("beforeClick"); // 最開始，让全部节点都加上beforeClick样式
});
});

$(function(){
$("#menuBar ul li").each(function(i) {
$(this).click(function(){
$(this).siblings("li").removeClass("clickedMenu"); //让其余兄弟节点去掉clickedMenu样式，即点击后的菜单样式
$(this).siblings("li").addClass("beforeClick"); // 再让其余兄弟节点加入上点击前的样式beforeClick
$(this).addClass("clickedMenu");// 给当前节点加入上clickedMenu样式。
})
});
})
</script>

效果图：

1、初始状态：



2、鼠标经过某一菜单项时的状态：



3、鼠标点击某一菜单后，而且鼠标经过其他菜单项时的状态：



3、当再次点击其他菜单时，样式继续发生变化：