[英]Multiple tab sections on the same page
I am using the following script for the tab section.我正在为选项卡部分使用以下脚本。 How can I create the second tab panel on the same page with a different id?
如何在同一页面上创建具有不同 ID 的第二个选项卡面板? HTML is auto-populated so can not be modified.
HTML 是自动填充的,因此无法修改。
As this page is created using Unbounce, unable to modify the HTML.由于此页面是使用 Unbounce 创建的,因此无法修改 HTML。
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>
Should be a simple case of wrapping your current JS in a function that takes the two container IDs as parameters应该是将您当前的 JS 包装在 function 中的一个简单案例,它将两个容器 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')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.