Skip to content
Small component to enable tabbing pages with Bootstrap 4 cards (or some other paging elements).
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
tabPages.js
test.html

README.md

TabPages

Small component to enable tabbing pages with Bootstrap 4 cards (or some other paging elements).

Small Demo: http://vandango.org/github/tabPagesDemo/

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 href="#" class="btn btn-primary">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 href="#" class="btn btn-primary">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 href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

JavaScript Call

$(function() {
  // basic initialization, without object possible
  TabPages.init('myTabPage');

  // to pre-select you need the object itself
  var tab = TabPages.init('myTabPage');
  tab.selectTab('page3');
  
  // or do it the classic way
  var myTabElement = new TabPages('myTabPage');
  myTabElement.initTabs();
  myTabElement.selectTab('page3');
});
You can’t perform that action at this time.