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类。

检查This

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/

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

3 个答案: