如何用单个JavaScript函数实现单页面多组独立标签页效果

解决方案 #

你原来的两个函数逻辑完全一致，仅操作的标签内容类名不同，只要给公共函数增加「标签内容类名」的入参就可以实现复用，不会出现组间串扰的问题。

修改后的JavaScript代码

// 单函数实现多组标签切换，第一个参数是要显示的内容ID，第二个参数是当前组的内容公共类名
function openTab(tabId, tabClass) {
    var i;
    var tabContents = document.getElementsByClassName(tabClass);
    for (i = 0; i < tabContents.length; i++) {
        tabContents[i].style.display = "none";
    }
    document.getElementById(tabId).style.display = "block";
}

修改后的HTML调用部分

只需要修改按钮的onclick属性，传入对应的类名即可，原有结构不用动：
第一组标签的按钮调用：

<button class="w3-button tb" style="width: 100px !important;" onclick="openTab('London', 'city')">London</button>
&nbsp;
<button class="w3-button tb" style="width: 150px !important;" onclick="openTab('Paris', 'city')">Paris</button>

第二组标签的按钮调用：

<button class="w3-button tb" style="width: 100px !important;" onclick="openTab('Lon', 'ci')">One more</button>
&nbsp;
<button class="w3-button tb" style="width: 150px !important;" onclick="openTab('Par', 'ci')">Second Tab</button>

CSS部分不需要做任何修改，原有效果可以完全保留。

内容的提问来源于stack exchange，提问作者user16639239