如何使用jquery/javascript動態改變菜單的風格？

Question

您好我有這樣

Home Portfolio Help Contact styles 

    <div id="menu1"> 
<ul class="tabs"> 
<li><h4><a href="#">In the blog &raquo;</a></h4></li> 
<li class="hasmore"><a href="#"><span>Recent</span></a> 
    <ul class="dropdown"> 
     <li><a>Menu item 1</a></li> 
     <li><a href="#" >Menu item 2</a></li> 
     <li><a href="#">Menu item 3</a></li> 
     <li><a href="#">Menu item 4</a></li> 
     <li><a href="#">Menu item 5</a></li> 
     <li class="last"><a href="#">Menu item 6</a></li> 
    </ul> 
</li> 
<li class="hasmore"><a href="#"><span>Topics</span></a> 
    <ul class="dropdown"> 
     <li><a href="#">Topic 1</a></li> 
     <li><a href="#">Topic 2</a></li> 
     <li><a href="#">Topic 3</a></li> 
     <li class="last"><a href="#">Topic 4</a></li> 
    </ul> 
</li> 
<li><h4><a href="#">Elsewhere &raquo;</a></h4></li> 
<li><a href="#"><span>About</span></a></li> 
<li class="hasmore"><a href="#"><span>Networks</span></a> 
    <ul class="dropdown"> 
     <li><a href="#">Twitter</a></li> 
     <li><a href="#">posterous</a></li> 
     <li><a href="#">SpeakerSite</a></li> 
     <li><a href="#">LinkedIn</a></li> 
     <li class="last"><a href="#">See more&hellip;</a></li> 
    </ul> 
</li> 
<li><a href="#"><span>Bookmarks</span></a></li> 

以同樣的方式的網頁，其中i有兩種類型的菜單1）頂菜單（水平的）2）左邊的菜單（垂直）我有垂直，其具有一個標籤叫的風格，無論在樣式選項卡，我有

styles 
    style-1 
    style-2 
    style-3 
    style-3 

現在我的工作就是當過我想改變菜單的風格動態我會去的風格選項卡中選擇風格和菜單的風格應該改變....

我不知道該從哪裏開始..please任何一個可以幫我這個或示例代碼提供將gratefull他們

Answer 1

在樣式表中創建兩個班，一個如果菜單是縱一菜單是水平的。在樣式選項卡中點擊選項，使用jquery更改菜單div的css類。

檢查This

Answer 2

用於此目的

像onmouseover事件，你可以執行使用jQuery選擇

function f() 
{ 
    $('#ms').removeCss("mass"); 
    $('#ms').addCss("mass2");  
} 

你的代碼可能是

<li id="ms" class="mass" onmouseover="f();"><a href="#"><span>Networks</span></a> 
    <ul class="dropdown"> 
     <li><a href="#">Twitter</a></li> 
     <li><a href="#">posterous</a></li> 
     <li><a href="#">SpeakerSite</a></li> 
     <li><a href="#">LinkedIn</a></li> 
     <li class="last"><a href="#">See more&hellip;</a></li> 
    </ul> 
</li> 

Answer 3

IIRC，有人就是這樣做的你在SO javascript聊天已經。

這是鏈接：http://jsfiddle.net/NUaA5/