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

Question

嗨，我有一个网页，其中有两种菜单1）顶部菜单（水平）2）左侧菜单（垂直）

  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>

以同样的方式，我有垂直的，有一个称为样式的标签，在两个样式标签中，

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

现在我的工作是，当我想动态更改菜单样式时，我将转到样式选项卡，选择样式，然后更改菜单样式。

我不知道从哪里开始..请任何人可以帮我这个忙，或者提供示例代码，他们将不胜感激

Answer 1

在样式表中创建两个类，如果菜单是垂直的，则创建一个类，如果菜单是水平的，则创建一个类。 在样式选项卡中单击选项后，使用jquery更改菜单div的css类。

检查这个

Answer 2

为此使用jQuery选择器

像onmouseover事件，您可以执行

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/