Universitäts­rechen­zentrum
WWW
Universitäts­rechen­zentrum 

Pager in Kombination mit Tabs

<!-- Tabs mit Inhalt -->
<div class="tab-content">
  <div class="active tab-pane" id="nav1">
    <h2>Artikel Seite 1</h2>
    Hier folgt der Inhal der Seite 1.
  </div>

  <div class="tab-pane" id="nav2">
    <h2>Artikel Seite 2</h2>
    Hier folgt der Inhalt der Seite 2.
  </div>

  <div class="tab-pane" id="nav3">
    <h2>Artikel Seite 3</h2>
    Hier folgt der Inhalt der Seite 3.
  </div>

  <div class="tab-pane" id="nav4">
    <h2>Artikel Seite 4</h2>
    Hier folgt der Inhalt der Seite 4.
  </div>

  <div class="tab-pane" id="nav5">
    <h2>Artikel Seite 5</h2>
    Hier folgt der Inhalt der Seite 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() {
        // Index des aktiven Tabs ermitteln
        return contentPages.index(contentPages.filter('.active'));
    }

    function syncTucPager() {
        // Buttons vor/zurück mit dem aktiven Tab abgleichen
        var i = activePageIndex();
        contentPager.find('.prev').toggleClass('disabled', i <= 0);
        contentPager.find('.next').toggleClass('disabled', i >= contentPages.length - 1);
    }

    function switchContentPage(offset) {
        // Wechsel zu nächster/vorheriger Seite (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) {
        // Klick-Event der Buttons "vor" und "zurück"
        e.preventDefault();
        switchContentPage($(this).closest('.prev').length ? -1 : 1);
    });

    contentPager.on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
        // Tab wurde gewechselt, also aktive Klasse im Pager aktualisieren
        // dieses Event wird ausgelöst:
        //  * wenn vor/zurück geklickt wird,
        //  * wenn eine Seitennummer geklickt wird,
        //  * oder wenn der Anker in der URL geändert wird
        contentPages.removeClass('active');
        $(this).parent().addClass('active');
        syncTucPager();
    });

    syncTucPager();
});
</script>

TUCaktuell