对于带有引导程序的选项卡式表单,我有两个按钮基本上是“下一个”和“上一个”按钮。当您从介绍选项卡转到申请人选项卡时,代码就可以正常工作。唯一的问题是元素中有 11 个“标签”。我需要<a>
在每个选项卡上更改其中的重要部分。
每次用户浏览表单时,我需要更改的是“onclick”函数末尾的href
、.style.width
和两个。classNames
<a href="" data-toggle="tab" class="btn btn-primary pull-left hide" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Previous</a>
<a href="#applicant" data-toggle="tab" class="btn btn-primary pull-right" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Next</a>
需要与按钮对应的部分用id
11 个部分的不同标识。
<div class="tab-pane" id="confirmation">
因此,例如,当用户从介绍选项卡中单击“下一步”按钮时,我需要将上面的内容更改为:(反之亦然,用于上一个按钮)
<a href="#introduction" data-toggle="tab" class="btn btn-primary pull-left" onclick="document.getElementById('progressBar').style.width='10%'; document.getElementById('introductionTab').className='active'; document.getElementById('applicantTab').className='';">Previous</a>
<a href="#applicant" data-toggle="tab" class="btn btn-primary pull-right" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Next</a>
等等贯穿始终tab-panes
。
我想我可以做类似的事情,我真的不知道如何启动它以及如何更改我需要的特定 onclick 元素。
if(this tab-pane is something?)
{
document.getelementById('previous').href="";
document.getelementById('previous').style.width="";
document.getelementById('previous').className="";
}
根据评论中的要求,选项卡的布局如下:
<div class="tab-content">
<div class="tab-pane" id="introduction">
//content here
</div>
<div class="tab-pane" id="applicant"> //and so on just like this for all 11 tabs.
//content here
</div>
</div>