jquery CSS main Menu style jump

The effect is quite common: the main course of a Web page has a default style (such as a style), and when the mouse passes through a menu item, it applies a style (such as a B-style), and when the mouse clicks on a menu item, it applies a B-style, The rest of the menu items are stripped of the B style and the default a style is applied. After trying to write a relatively simple code, save it for later use.

HTML code:

<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 code:

#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 Code:

<script>$ (function () {$ ("#menuBar ul Li"). each (function () {        $ (this). addclass ("Beforeclick");//At the very beginning, Make all nodes add Beforeclick style    }); $ (function () {$ ("#menuBar ul Li"). each (function (i) {$ (this). Click (function () {$ (this). Siblings ("Li"). Removeclass (" Clickedmenu "); Let the rest of the sibling nodes get rid of the clickedmenu style, that is, the menu style after the click of $ (this). Siblings ("Li"). addclass ("Beforeclick"); Let the remaining sibling nodes add the style beforeclick$ (this) before the click. addclass ("Clickedmenu");//Add a clickedmenu style to the current node. })});}) </script>

：

1. Initial state:

2, the mouse through a menu item when the state:

3, the mouse click on a menu, and the mouse through other menu items when the state:

3. When you click another menu again, the style continues to change:

jquery CSS main Menu style jump