jquery css 主菜单样式的跳转

来源：互联网发布：win7远程桌面端口号编辑：程序博客网时间：2024/05/21 21:02

想要实现的效果其实是挺常见的那种：网页的主菜单一开始有一种默认的样式（如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、当再次点击其它菜单时，样式继续发生变化：

0 0