我有两个按钮,它们本质上是带有 Bootstrap 的选项卡式表单的“下一个”和“上一个”按钮。当您从介绍选项卡转到申请人选项卡时,代码可以正常工作。唯一的问题是元素中有 11 个“制表符”。我需要这个 <a>
中的基本部件在每个选项卡上更改。
我需要更改的是 href
, .style.width
, 和两个 classNames
每次用户浏览表单时,在“onclick”函数的末尾。
<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>
最佳答案
给你... 这是使用 Twitter bootstrap 和 Jquery ... 希望对你有帮助... 进度条有点乱七八糟,但它是一个开始,我相信你可以从那里解决问题......
唯一糟糕的是选项卡是可点击的,这不是您想要的,因为您希望它们在无法单击选项卡的情况下浏览表单......但具体细节在这里
$(document).ready(function(){
//Progress bar calculation
function setProgress(){
var length = $tabs.length;
var index = ($('li').index($(".active")))+1;
var width = (index/length)*100;
$('#progressBar').css('width', width+'%');
}
var $tabs = $('#tab_bar li');
setProgress();
$('#prevtab').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$('#nexttab').on('click', function () {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$tabs.click(function () {
setTimeout(setProgress, 200)
});
});
然后是你的 HTML,我不知道你有什么 < ul >
,因为你没有提供那部分......所以我只是破解了一些东西......但这应该与你的结构相似
<ul class="nav nav-tabs" id="tab_bar">
<li class="active"><a href="#introduction" data-toggle="tab">Intro</a></li>
<li><a href="#secondtab" data-toggle="tab">SecondTab</a></li>
<li><a href="#thirdtab" data-toggle="tab">Third</a></li>
<li><a href="#fourthtab" data-toggle="tab">Fourth</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="introduction">
asdasdasdas
</div>
<div class="tab-pane" id="secondtab">
asdasdsagreteryterythhgh
</div>
<div class="tab-pane" id="thirdtab">
rthrthrthrthrt
</div>
<div class="tab-pane" id="fourthtab">
yujghjuyjyujedgjhegj
</div>
</div>
<a class="btn" id="prevtab" type="button">Prev</button>
<a class="btn" id="nexttab" type="button">Next</button>
关于javascript - 动态设置 `a href` 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17057716/