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

大佬教程收集整理的这篇文章主要介绍了同一页面上的多个选项卡部分，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决同一页面上的多个选项卡部分？

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

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

@R_419_6832@

<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

解决方法

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')

大佬总结

以上是大佬教程为你收集整理的同一页面上的多个选项卡部分全部内容，希望文章能够帮你解决同一页面上的多个选项卡部分所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。