Question

我在下面有一个导航栏

<div id="cmenu" class="cmenu r">

<div id="help"><a onClick="topMenu('help','current')" href="javascript:void(0)"><span>Help</span></a></div>
<div id="refer"><a onClick="topMenu('refer','current')" href="javascript:void(0)"><span>Refer Friends</span></a></div>
<div id="home"><a onClick="topMenu('home','current')" href="javascript:void(0)"><span>Home</span></a></div>

</div>

当点击链接时，我想在div元素中将“class”属性设置为“current”。所以，我可以在div / link上指定一个新的样式。这是我的功能：

function topMenu(id,prNode){
var topMenu=document.getElementById("cmenu").getElementsByTagName("div");
for (var a in topMenu){topMenu[a].removeAttribute("class");} //remove all "current" class (third line)
document.getElementById(id).setAttribute("class",prNode);} //set the new div class as "current" (last line)

但不幸的是。我的函数的最后一行不起作用...然后我尝试将最后一行更改为

alert("alert message");

它也不起作用...... 但是，当我评论我的函数的第三行时，最后一行正在工作....第三行是否有任何错误语法？...

Answer 1

将nodeList像数组一样（不像对象）

for (var a=0;a<topmenu.length;++a){topMenu[a].removeAttribute("class");}

如果你像对象一样走，你也会获得nodeList的属性“length”，这会导致错误。

Answer 2

在旧版本的Internet Explorer中，

setAttribute严重破坏，请勿使用它。将值分配给（而不是使用getAttribute）来映射到属性的DOM属性。

在这种情况下，className：

function topMenu(id,prNode){
    var topMenu = document.getElementById("cmenu").getElementsByTagName("div");
    for (var i = 0; i < topMenu.length; i++) {
        topMenu[i].className = '';
    }
    document.getElementById(id).className = prNode;
}

另外，不要使用for in来遍历数组和类似数组的对象。 for in遍历所有对象的属性，而不仅仅是编号的属性。

使用JavaScript设置HTML属性

2 个答案: