同一页面上的多个选项卡部分答案

【问题标题】：Multiple tab sections on the same page同一页面上的多个选项卡部分
【发布时间】：2021-04-21 12:55:55
【问题描述】：

我正在为选项卡部分使用以下脚本。如何在同一页面上创建具有不同 ID 的第二个选项卡面板？ HTML 是自动填充的，因此无法修改。

由于此页面是使用 Unbounce 创建的，因此无法修改 HTML。

HTML

<div class="lp-element lp-pom-box" id="lp-pom-box-290">
    <a class="lp-element lp-pom-button active" id="lp-pom-button-283" target="_self"><span class="label">TAB 1</span></a>
    <a class="lp-element lp-pom-button" id="lp-pom-button-284" target="_self"><span class="label">TAB 2</span></a>
    <a class="lp-element lp-pom-button" id="lp-pom-button-285" target="_self"><span class="label">TAB 3</span></a>
    <a class="lp-element lp-pom-button" id="lp-pom-button-286" target="_self"><span class="label">TAB 4</span></a>
</div>

<div class="lp-element lp-pom-box" id="lp-pom-box-241">
    <div id="lp-pom-box-241-color-overlay"></div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-292" style="">
        tab1
    </div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-297" style="display: none;">
        tab 2
    </div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-307" style="display: none;">
        tab 3
    </div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-309" style="display: none;">
        tab 4 
    </div>
</div>

JS code

【问题讨论】：

你好，所以当你点击TAB 1然后lp-pom-box-292应该显示等等？
是的，它在这部分工作正常。但我想在同一页面上创建相同的选项卡部分。例如，如果我创建具有不同 ID 的相同 html 副本。

标签： javascript html jquery css unbounce

【解决方案1】：

应该是一个简单的例子，将你当前的 JS 包装在一个以两个容器 ID 作为参数的函数中

function initTabs(tabId, contId){
    // only changes needed are these IDs
    var navButtons = $('#' + tabId+ ' a');
    //Replace #lp-pom-box-331 with the ID of your content box
    var contentBoxes = $('#' +contId +' .lp-pom-box');
    
    // remainder of code the same    
}

// usage
initTabs('lp-pom-box-290', 'lp-pom-box-241')

【讨论】：