Bootstrap分页和选项卡式元素

Question

I have some content inside of a tabbed element using Bootstrap like so:

<div class="tab-content"> 
   <div class="tab-pane active" id="website-information">
      ...
   </div> 
   <div class="tab-pane" id="personal-information"> 
      ...
   </div> 
   <div class="tab-pane" id="payment-information"> 
      ...
   </div> 
</div> 

And then after this I have some pagination elements like so:

<ul class="pager">
   <li class="previous"><a href="#website-information" data-toggle="tab">Previous</a></li>
   <li class="next"><a href="#owner-information" data-toggle="tab">Next</a></li>
</ul>

As you can see the pagination buttons are supposed to take you back a tab and forward a tab respectively whereas right now they are simply pointing to a certain tab that works fine if you only have two tabs but i'm going to possibly have about 4 by the time I am done. I am sure there is an obvious and simple way to make the previous and next buttons actually work with the tabs, I just can't figure it out. Any help and/or suggestions would be appreciated.

This is what bootstrap offers as selecting previously active and the next tab for tab elements. But I have no clue how to make them work:

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Answer 1

You will need Javascript to do this. HTML doesn't have the functionality to automagically detect the next or previous tab.

Take a look at jQuery, which is required for some of Bootstraps functionality. You are of course not required to use jQuery for this particular problem or effect, depending on your skill level and requirements you could use regular Javascript like any modern browser supports or you could go more advanced and use a little smarter Javascript framework to do some of the work for you.

For example, take a look at the jQuery selectors and the jQuery .children() function

Edit

The default Bootstrap solution you provided there isn't aimed at making the next and previous buttons work. What it does is pass the "e" that you've clicked of all links that contain data-toggle="tab" , and activate it.

You will need to rewrite and modify that piece of code. The selector is part of a possible solution where you select all tabs you have and then have jQuery figure out in which order they are in. You can then have the Next button call "next()" and the Back button "back()" which will then swap the active tab to -1 or +1 basically.

Answer 2

I found a neat example here of how to add Pagination with bootstrap tabs: http://www.bootply.com/60206

Hope this helps!