Bootstrap 4 TabPages

Ein viel geliebtes und viel kopiertes Thema im Web-Frontend Bereich sind Tabpages. Gerade Ansichten für Editoren, Konfigurationen und ähnliches brauchen mehrere Seiten nebeneinander.

Es gibt sicherlich genug Angebote da draußen (jQuery, etc.) die Tabs anbieten. Trotzdem hab ich mal eine ganz kleine Lösung geschrieben, die mit den TabPages in den neuen Cards in Bootstrap 4 umgehen kann.
jQuery wird aber benötigt.

Es ist nicht viel notwendig, ein bisschen HTML und meine tabPages.js.
Wichtig sind die HTML Attribute data-tabs="meineId" am Haupt Element (dem div-Tag) und die HTMl Attribute data-tab-page="page1" an den Links auf einem Tab selber (am a-Tag) und dasselbe Tag an der Page dann am div-Tag.

Hier ne kleine Demo!

HTML

<div class="card text-center" data-tabs="myTabPage">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
    <li class="nav-item"><a class="nav-link" href="#" data-tab-page="page1">Page 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#" data-tab-page="page2">Page 2</a></li>
    <li class="nav-item"><a class="nav-link" href="#" data-tab-page="page3">Page 3</a></li>
</ul>
</div>
<div class="card-block" data-tab-page="page1">
<h4 class="card-title">Special title treatment 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-primary" href="#">Go somewhere</a>

</div>
<div class="card-block" data-tab-page="page2">
<h4 class="card-title">Special title treatment 2</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-primary" href="#">Go somewhere</a>

</div>
<div class="card-block" data-tab-page="page3">
<h4 class="card-title">Special title treatment 3</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a class="btn btn-primary" href="#">Go somewhere</a>

</div>
</div>

JavaScript Call

$(function() {
// Initialisieren, ohne Objekt möglich
TabPages.init('myTabPage');

// Um eine Page vor zu selektieren, braucht man das Objekt aber
var tab = TabPages.init('myTabPage');
tab.selectTab('page3');

// geht auch klassisch
var myTabElement = new TabPages('myTabPage');
myTabElement.initTabs();
myTabElement.selectTab('page3');
});

Der Code selbst liegt in meinem Github Repo.