如何使用jquery / javascript动态更改菜单样式？

Question

Hi i have a webpage where i have two types of menus 1)top menu (horizontal) 2)left menu (vertical) like this

  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>

in the same way i have vertical which has a tab called styles,in both the styles tab i have

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

Now my work is to when ever i want to change the style of menus dynamically i will go to style tab select the style and the style of the menus should be changed....

i dont know where to start ..please can any one help me with this or provide with example code will be gratefull to them

Answer 1

Create two classes in stylesheet, one if the menu is vertical and one if the menu is horizontal. On clicking on an option in styles tab change the css class of menu div using jquery.

Check This

Answer 2

use jQuery selectors for this purpose

like onmouseover event you can execute

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

your code could be

<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, someone did this for you on the SO javascript chat already.

Here is the link: http://jsfiddle.net/NUaA5/