使選定選項卡活動，並保持不活動使用純JavaScript而不是jquery

Question

我有動態選項卡那裏可能我'n'數量的選項卡能夠捕獲該選項卡時，它的單擊並將其背景顏色更改爲綠色。 但是，當我選擇其他選項卡時，之前點擊的選項卡也保持綠色，但非活動選項卡應該處於白色背景中。

Answer 1

可以將所有的選項卡未設置背景，然後再添加背景顏色選擇的標籤是這樣的：

function showActiveTab(item) 
    { 
    var el = document.getElementsByTagName("LI"); 

    // Unset background color of all tabs to white 
    for (var i = 0, len = el.length; i < len; i++) { 
     el[i].style.background="white"; 
    } 
    // Add background color of selected tab to green 
    item.style.background="green"; 
    } 

Answer 2

跟蹤哪個選項卡被激活這樣的，只是將背景設置爲白色（或任何你喜歡），當它改變。

var activeTab = null; 
function showActiveTab(item) 
{ 
    if (null != activeTab) { 
     activeTab.style.background="white"; 
    } 
    item.style.background="green"; 
    activeTab = item; 
} 

零錢clickTabEvent刪除您使用工作的本地item圍繞匿名方法調用的所有上單擊處理程序中引用

function clickTabEvent() 
{ 
    var el = document.getElementsByTagName("LI"); 
    for (var i = 0, len = el.length; i < len; i++) { 
     var item = el[i]; 
     if (item.id && (item.id.indexOf("tab_")!=-1)) { 
      item.addEventListener('click', 
       function() { 
        showTabPanel(this); 
        showActiveTab(this); 
       } 
      ); 
     } 
    } 
}