0

我正在为选项卡部分使用以下脚本。如何在同一页面上创建具有不同 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代码

4

1 回答 1

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')
于 2021-04-21T13:20:09.600 回答