JavaScript更改ID将不起作用

Question

我似乎无法使用函数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> 

我的JavaScript代码是：

function changeTab(num){ 

    switch(num){ 
     case 1: 
      document.getElementById("selected").id = "1"; 
      break; 
     case 2: 
      document.getElementById("selected").id = "2"; 
      break; 
     case 3: 
      document.getElementById("selected").id = "3"; 
      break; 
     case 4: 
      document.getElementById("selected").id = "4"; 
      break; 
     default: 
      document.getElementById("selected").color = ""; 
    } 


    // 
    document.getElementById(num).id = "selected"; 

Answer 1

编辑为WTK建议（如上面的问题中留言）这是有效的HTML，ID值必须以字母开头，而不是一些......我已经更新了我的答案通过前面加上nav-的ID是有效的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> 

使用onclick句柄内变量会得到被点击的元素...然后你可以用下面的函数作为处理...

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"; 
    } 
} 

还有其他的，也许会更好，如何做到这一点。但是，这应该可以解决这个问题，如果你想深入研究，我会推荐书籍Pro JavaScript Design Patterns。