从所有列表项更新CSS类属性的纯JavaScript方式？

Question

我想使用Javascript(而不是jquery)来访问<ul>列表中的所有项目,并从除我选择的菜单项之外的所有内容中删除活动类.

这是清单:

<ul id='flash-menu'>
<li id="menu1" class='something active'>item 1</li>
<li id="menu2" class='somethingelse'>item 2</li>
<li id="menu3" class='somethingelse'>item 3</li>
</ul>

这是我的javascript:

function updateMenu(view_name) {
var list_items = document.getElementById('flash-menu').childNodes; 
for (var i=0 ; i<list_items.length ; i++){
        list_items[i].className = list_items[i].className.replace('/\bactive\b/','');
    }
document.getElementById(view_name).className += " active";
}

Javascript的最后一行(添加活动类)有效,但我不认为我正在访问列表项以从其他项中删除类.有什么建议？- 谢谢!

Answer 1

首先,你的正则表达式是错误的:

list_items[i].className.replace(/\bactive\b/, '');

注意:JavaScript中的正则表达式没有引号.JsFiddle上有一个稍微改动的工作版本.

此外,我得到了一些HTMLTextElements 实例list_items.在尝试访问不存在的className属性时,它们打破了循环(Fx3.6/Win7).你可以通过以下方式避免这种情况:

var list_items = document.getElementById('flash-menu').getElementsByTagName('li');
// Selecting _all_ descendant <li> elements

或者通过.className在循环体内检查读/写之前是否存在(例子).后者可能是最干净的选择,因为它仍然只影响直接的孩子(你可能有几个级别的<ul>s <li>).

也就是说,

function updateMenu(view_name) {
    var list_items = document.getElementById('flash-menu').childNodes; 
    for (var i=0, j=list_items.length; i<j; i++){
        var elm = list_items[i];
        if (elm.className) {
            elm.className = elm.className.replace(/\bactive\b/, '');
        }
    }
    document.getElementById(view_name).className += ' active';
}