Question

假设我有这样的菜单

<ul id="leftMenu">
    <li class="selected">Foo1</li>
    <li>Foo2</li>
    <li>Foo3</li>
    <li>Foo4</li>
    <li>Foo5</li>
    <li>Foo6</li>             
</ul>

现在通过javascript，我想更改突出显示的一个，从而从当前的一个中删除“selected”并添加到下一个

我需要的是，首先从当前选择的类中删除该类，而不是添加到下一个类。

如何实现这一目标？

编辑：我将它用于没有鼠标或jquery的嵌入式系统，但是远程控制和普通的javascript，所以上下都是我唯一的选择，不允许悬停：S

Answer 1

在这个时代使用javascript是一种矫枉过正的行为。

由于您标记了此css，我可以建议使用以下仅限CSS的方法，也称为：hover pseudo-class：

ul#leftMenu li:hover {
  color: red;
}

Answer 2

如果是我，而且我知道菜单不是很大，我会从所有 <li>元素中删除该类，然后将其添加到我想要的那个

var lis = document.getElementById('leftMenu').getElementsByTagName('li');
for (var i = 0; i < lis.length; ++i)
  lis[i].className = lis[i].className.replace(/\bselected\b/g, '');

现在，关于如何将课程放回，这取决于您如何找到新收藏的<li>。如果它在事件处理程序中，那么事件对象将把它称为“目标”。因此，您只需将“selected”附加到类名。

Javascript更改选定的菜单项类

2 个答案: