使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态

Make the selected tab active and remaining inactive using pure javascript not jquery

本文关键字：活动状态 选项 javascript 而非 jquery      更新时间：2023-09-26

如果有动态选项卡，可能有'n'个选项卡能够在单击时捕获选项卡，并将其背景色更改为绿色。但当我选择另一个选项卡时，之前单击的选项卡也保持为绿色，但非活动选项卡应为白色背景。

您可以先取消设置所有选项卡的背景，然后将背景颜色添加到所选选项卡中，如下所示：

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

跟踪哪个选项卡处于活动状态，并在其更改时将背景设置为白色（或您喜欢的任何颜色）。

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);
                }
            );
        }
    }
}
相关文章：