[英]prev next function for nested tabs in bootstrap
I am using bootstrap tabs and dropdown with prev next functionality 我正在使用引导选项卡和带有prev next功能的下拉菜单
<div class="row">
<input class="btnPrevious underline" type="button" value="« Previous" />
<input class="btnNext underline" type="button" value="Next »" />
</div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<!--<li class="active"><a href="#home" role="tab" data-toggle="tab">Before Starting the Application</a></li>-->
<li class="active dropdown tabdrop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Before Starting the Application<b class="caret"></b></a>
<ul class="dropdown-menu dm">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Before Starting the Application</a>
</li>
<li><a href="#who" role="tab" data-toggle="tab">Who Can Apply?</a>
</li>
</ul>
</li>
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li><a href="#applicant" role="tab" data-toggle="tab">Applicant Details</a>
</li>
<li><a href="#permises" role="tab" data-toggle="tab">Premises Details</a>
</li>
<li><a href="#personal" role="tab" data-toggle="tab">Details of Personal License Holder</a>
</li>
</ul>
</li>
<li><a href="#messages" role="tab" data-toggle="tab">Fees and Payments</a>
</li>
<li><a href="#settings" role="tab" data-toggle="tab">Checklist</a>
</li>
<li><a href="#profile1" role="tab" data-toggle="tab">Conditions</a>
</li>
<li><a href="#messages2" role="tab" data-toggle="tab">Submit</a>
</li>
<li><a href="#settings1" role="tab" data-toggle="tab">Tab 1</a>
</li>
<li><a href="#settings2" role="tab" data-toggle="tab">Tab 2</a>
</li>
<li><a href="#settings3" role="tab" data-toggle="tab">Tab 3</a>
</li>
<li><a href="#settings4" role="tab" data-toggle="tab">Tab 4</a>
</li>
<li><a href="#settings5" role="tab" data-toggle="tab">Tab 5</a>
</li>
<li><a href="#settings6" role="tab" data-toggle="tab">Tab 6</a>
</li>
<li><a href="#settings7" role="tab" data-toggle="tab">Tab 7</a>
</li>
</ul>
</div>
To find anchor tag...for prev next 寻找锚标签...上一个下一个
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li, li > ul > li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
But from the script i didn't find all the anchor tag means anchor tag inside the dropdown (li > ul > li > a ) 但是从脚本中我没有找到所有的锚标记,这意味着下拉列表内的锚标记(li> ul> li> a)
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li><a href="#applicant" role="tab" data-toggle="tab">Applicant Details</a>
</li>
<li><a href="#permises" role="tab" data-toggle="tab">Premises Details</a>
</li>
<li><a href="#personal" role="tab" data-toggle="tab">Details of Personal License Holder</a>
</li>
</ul>
</li>
I want to find each anchor tag from nav-tabs for prev and next function. 我想从导航选项卡中找到每个锚标记,以实现上一个和下一个功能。 Thanks in Advance.
提前致谢。
CHK1LAST(); CHK1LAST(); var $tabs = $('.tabbable li');
var $ tabs = $('。tabbable li');
$('.btnPrevious').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});
$('.btnNext').on('click', function () {
if ($tabs.filter('.active').find('ul').length > 0) {
var $bb = $tabs.filter('.active').find('ul');
if ($bb.find('li.active').length > 0) {
if ($bb.find('li.active').index() == (parseInt($bb.find('li').length) - 1)) {
if ($bb.parent('li').next('li').find('li').length > 0)
$bb.parent('li').next('li').find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
else
$bb.parent('li').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li.active').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
}
else
$tabs.filter('.active').next('li').eq(0).find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.