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。