Question

我有动态标签可能是我＆＃39; n＆＃39;选项卡的数量能够在单击时捕获选项卡并将其背景颜色更改为绿色。但是，当我选择其他选项卡时，之前单击的选项卡也保持绿色，但非活动选项卡应为白色背景。

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

使用纯javascript而不是jquery使选定的选项卡处于活动状态并保持不活动状态

2 个答案: