Question

我有一个基本上只是一堆无序列表的菜单。这是一个例子：

<div id="horiz-menu" class="moomenu"><div class="wrapper">
  <ul class="menutop">
    <li><a href="something.html"><span>Home Page (top menu item)</span></a>
      <ul>
        <li><a href="something2.html"><span>Second page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
    <li class="parent active"><a href="something3.html"><span>Resources (top menu item)</span></a>
      <ul>
        <li id="current" class="active"><a href="something4.html"><span>Third Page (sub menu item)</span></a>
        </li>
        <li><a href="something5.html"><span>Fourth Page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div></div>

它的样式看起来像顶部菜单项是水平导航菜单，子菜单项是垂直下拉列表（没有滚动）当顶部菜单项悬停在上面;隐藏其他明智的。这一切都有效。我的问题是什么是编码css的正确方法，以便当访问者在该页面上时（不是简单地将鼠标悬停在该菜单项上）突出显示子菜单项（背景颜色应该更改）？

我试过这个：

#horiz-menu ul li.active {background-color:#000;}
#horiz-menu ul li#current {background-color:#000;}

我不知道这是否是这样做的方法。有人可以帮忙吗？如果您感到困惑，我希望能够使用css为第二个ul着色，使用li class =“active”或id =“current”。 “活动”和“当前”id和类动态应用于正在查看的页面的列表项。

谢谢！

Answer 1

尝试使用JQuery中的addClass方法

$("a.classname").click(function(){

    $("li#idname").addClass("active");

});

Answer 2

使用具有背景颜色的.active类应该可行，但这取决于您拥有的其他CSS。您必须确保.active或#current的特异性大于默认样式（#horiz-menu ul li）。另外，请务必仔细检查它是li是否具有默认背景css而不是其中的锚点。

在查看时突出显示子菜单项

2 个答案: