Bootstrap Tabpanel Next Previous按钮

我有一个Tab Tab，它有很长的内容，所以用户有下一个和上一个按钮会更好。Bootstrap Tabpanel Next Previous按钮

但他们不工作。

这是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>

来源

2016-02-27 Abhilash Srivastava

使用bootstrap的'tab'功能，它会更好 http://getbootstrap.com/javascript/#tabs –

不错的建议，但我不能改变设计，因为我和我的朋友都在一个组中，他做了这样的设计：P –

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'); 
    }); 
})

希望这有助于。

来源

2016-02-27 13:09:17

谢谢，我是多么愚蠢！ :)。以及我upvoted但我有不到15声望。 –

是否可以滚动页面，使标签出现在屏幕的顶部？请发送修改后的js –

谢谢。嗯，我想用户点击下一个按钮或上一个按钮来到相应的选项卡和垂直滚动到顶部，以便UL标签在屏幕的顶部。 –

Bootstrap Tabpanel Next Previous按钮

回答

相关问题