JavaScript更改ID赢得';行不通
我似乎无法使用函数JavaScript更改ID赢得';行不通,javascript,html,css,Javascript,Html,Css,我似乎无法使用函数changeTab(num)将li元素的ID从number更改为selected,并将所选选项卡的ID还原为其默认编号。它只工作一两次,然后停止。我的目标是模拟选中和未选中选项卡的更改,例如在Chrome选项卡中 <ul id="nav"> <li onClick="changeTab(1);" id="1"><a href="#">Nav 1</a></li>
changeTab(num)
将li元素的ID从number
更改为selected
,并将所选选项卡的ID还原为其默认编号。它只工作一两次,然后停止。我的目标是模拟选中和未选中选项卡的更改,例如在Chrome选项卡中
<ul id="nav">
<li onClick="changeTab(1);" id="1"><a href="#">Nav 1</a></li>
<li onClick="changeTab(2);" id="2"><a href="#">Nav 2</a></li>
<li onClick="changeTab(3);" id="selected"><a href="#">Nav 3</a></li>
<li onClick="changeTab(4);" id="4"><a href="#">Nav 4</a></li>
</ul>
编辑正如WTK所建议的(作为您上述问题中的注释),要使其成为有效的HTML,id值必须以字母而不是数字开头。。。我已通过在id前面加上
nav-
,将答案更新为有效的HTML
<ul id="nav">
<li onclick="changeTab(this);" id="nav-1"><a href="#">Nav 1</a></li>
<li onclick="changeTab(this);" id="nav-2"><a href="#">Nav 2</a></li>
<li onclick="changeTab(this);" id="selected"><a href="#">Nav 3</a></li>
<li onclick="changeTab(this);" id="nav-4"><a href="#">Nav 4</a></li>
</ul>
还有其他可能更好的方法可以做到这一点。不过,这应该可以解决问题,如果您想深入研究,我建议您阅读《Pro JavaScript设计模式》一书。不要使用ids。添加和删除类名。让ID保持不变。这是对
switch
语句的可怕滥用。请使用if…else
语句还要注意,数字ID不会验证-ID属性不能以数字开头。@LeeKowalkowskiif(num<5){…}else{…}
?@Zirak:No。我的意思是拥有if(x=1)y=1 else if(x=2)根据问题的上下文,y=2…
可以简化为y=x
。+1:这是有效的,可以解决问题,而无需授课。因此,在不增加善意混淆的情况下解决了问题。谢谢。如果试图为这个问题提供一个有效的答案,那么其他的评论可能会显得不那么有说服力……这是针对谁的?什么问题?如果可以的话,提出一个新的StackOverflow问题,如果可以的话,你可以在这个问题上获得几千个大脑,而不是三个。如果你有时间的话,我有几个问题。getElementsByTagName返回数组,因为它返回所有li元素,对吗?变量el取这个值,我不知道它到底是如何工作的(它是什么类型,等等),所以你能解释一下吗?我在答案中添加了注释,希望能解释所有的步骤
<ul id="nav">
<li onclick="changeTab(this);" id="nav-1"><a href="#">Nav 1</a></li>
<li onclick="changeTab(this);" id="nav-2"><a href="#">Nav 2</a></li>
<li onclick="changeTab(this);" id="selected"><a href="#">Nav 3</a></li>
<li onclick="changeTab(this);" id="nav-4"><a href="#">Nav 4</a></li>
</ul>
function changeTab(el) {
// This function is passed 'el' from the onclick handler of the li. The
// onclick handler passes 'this' through as the 'el' argument. 'el' will
// be a HTMLElement object.
// We only want to do something if the 'el' HTMLElement object does not
// currently have the 'id' "selected", otherwise we do nothing.
if(el.id != "selected") {
// Revert all tabs to their original ids
// Try and find the HTMLElement with the id "nav". The variable 'nav'
// will be another HTMLElement object, this time representing the ul element.
var nav = document.getElementById("nav");
// The function 'getElementsByTagName' always returns a
// HTMLElementCollection, it might have zero elements if there were no
// matches. We can use it as an array (although there are things to
// take into consideration that affect performance). The
// HTMLElementCollection will contain all li elements that are
// descendants of the 'nav' ul element
var lis = nav.getElementsByTagName("li");
// Here we do a for-loop to iterate through the element collection
// each item in the HTMLElementCollection will be a HTMLElement
// representing one of the li elements
for(var i = 0; i < lis.length; ++i) { // Arrays are zero-indexed
// We set the id to nav-n overwriting whatever was there previously
lis[i].id = "nav-" + (i + 1); // Our tabs are one-indexed
}
// Set the id for the original HTMLElement that was passed into the
// function to "selected", we do this step last as one of the li HTMLElements
// we change in the for-loop above will also be this HTMLElement
el.id = "selected";
}
}