我有一个选项卡面板,它的内容很长,因此用户最好有下一个和上一个按钮。
但它们不起作用。
这是aspx代码:
<div class="col_4">
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
<li role="presentation" class="active"><a href="#aboutmyself" id="aboutmyself-tab" role="tab" data-toggle="tab" aria-controls="aboutmyself" aria-expanded="true">About Myself</a></li>
<li role="presentation"><a href="#familydetails" role="tab" id="familydetails-tab" data-toggle="tab" aria-controls="familydetails">Family Details</a></li>
<li role="presentation"><a href="#partnerpreference" role="tab" id="partnerpreference-tab" data-toggle="tab" aria-controls="partnerpreference">Partner Preference</a></li>
<li role="presentation"><a href="#contact" role="tab" id="contact-tab" data-toggle="tab" aria-controls="contact">Contact</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="aboutmyself" aria-labelledby="aboutmyself-tab">
<!--Tab1 content-->
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="familydetails" aria-labelledby="familydetails-tab">
<!--Tab2 content-->
<a class="btn-all btnPrevious" >Previous</a>
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="partnerpreference" aria-labelledby="partnerpreference-tab">
<!--Tab3 content-->
<a class="btn-all btnPrevious" >Previous</a>
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="contact" aria-labelledby="contact-tab">
<!--Tab4 content-->
<a class="btn-all btnPrevious" >Previous</a>
</div>
这是脚本。
<script type="text/javascript">
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
最佳答案
<强> Working fiddle
您的代码工作正常,您应该将其放入 ready
函数中:
$(function(){
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
})
希望这有帮助。
关于javascript - Bootstrap 选项卡面板 下一个 上一个 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35669981/