jquery css 主菜單樣式的跳轉

標籤：style   blog   http   color   io   ar   java   for   div   

想要實現的效果其實是挺常見的那種：網頁的主菜單一開始有一種預設的樣式（如A樣式），當滑鼠經過某一功能表項目時，此功能表項目會套用一種樣式（如B樣式），當滑鼠點擊某一功能表項目時，當前功能表項目會套用B樣式，其餘功能表項目會去掉B樣式而套用預設的A樣式。經過嘗試，寫出了比較簡單的代碼，存下來，以備後用。

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、當再次點擊其它菜單時，樣式繼續發生變化：

jquery css 主菜單樣式的跳轉