Pager combined with tabs
<!-- Tabs with content -->
<div class="tab-content">
<div class="active tab-pane" id="nav1">
<h2>Articles page 1</h2>
Here follows the content of page 1.
</div>
<div class="tab-pane" id="nav2">
<h2>Articles page 2</h2>
Here follows the content of page 2.
</div>
<div class="tab-pane" id="nav3">
<h2>Articles page 3</h2>
Here follows the content of page 3.
</div>
<div class="tab-pane" id="nav4">
<h2>Articles page 4</h2>
Here follows the content of page 4.
</div>
<div class="tab-pane" id="nav5">
<h2>Articles page 5</h2>
Here follows the content of page 5.
</div>
</div>
<!-- Pager -->
<ul class="pagination" id="contentPager">
<li class="prev disabled">
<a href="#"><span class="tucicon-nav-left"></span></a>
</li>
<li class="page active"><a href="#nav1" data-toggle="tab">1</a></li>
<li class="page"><a href="#nav2" data-toggle="tab">2</a></li>
<li class="page"><a href="#nav3" data-toggle="tab">3</a></li>
<li class="page"><a href="#nav4" data-toggle="tab">4</a></li>
<li class="page"><a href="#nav5" data-toggle="tab">5</a></li>
<li class="next">
<a href="#"><span class="tucicon-nav-right"></span></a>
</li>
</ul><script>
$(document).ready(function() {
var contentPager = $('#contentPager');
var contentPages = contentPager.find('li.page');
function activePageIndex() {
// return index of currently active tab
return contentPages.index(contentPages.filter('.active'));
}
function syncTucPager() {
// sync the pager buttons prev/next with the active tab
var i = activePageIndex();
contentPager.find('.prev').toggleClass('disabled', i <= 0);
contentPager.find('.next').toggleClass('disabled', i >= contentPages.length - 1);
}
function switchContentPage(offset) {
// switch to next/previous page (offset = +1/-1)
var i = activePageIndex() + offset;
if (i < 0 || i >= contentPages.length) return;
contentPages.eq(i).find('a').tab('show');
}
contentPager.on('click', '.prev a, .next a', function (e) {
// click event on prev/next buttons
e.preventDefault();
switchContentPage($(this).closest('.prev').length ? -1 : 1);
});
contentPager.on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
// tab has been switched, update active class in pager
// this event is triggered
// * via prev/next button,
// * via click on a page number,
// * or via a change of the url anchor
contentPages.removeClass('active');
$(this).parent().addClass('active');
syncTucPager();
});
syncTucPager();
});
</script>
