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、当再次点击其他菜单时,样式继续发生变化: