Flexible jQuery Tabbed Interface Plugin - SmartTab

SmartTab is a powerful and highly customizable jQuery plugin for creating tabbed interface with cool animation effects.

It supports ajax contents, Keyboard Navigation and is compatible with all major browsers.

How to use it:

1.  Include jQuery library and the SmartTab.js script on the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.smartTab.js"></script>

2. Include the needed stylesheet on the web page. All possible themes:

• Default
• Classic
• Brick
• Bootstrap Pills
• Bootstrap Tabs
• Dark

<!-- All in one -->
<link href="/path/to/dist/css/smart_tab_all.min.css" rel="stylesheet" />

<!-- Default Theme -->
<link href="/path/to/dist/css/smart_tab.min.css" rel="stylesheet" />

<!-- Brick Theme -->
<link href="/path/to/dist/css/smart_tab_brick.min.css" rel="stylesheet" />

<!-- Bootstrap Pills Theme -->
<link href="/path/to/dist/css/smart_tab_bspills.min.css" rel="stylesheet" />

<!-- Bootstrap Tabs Theme -->
<link href="/path/to/dist/css/smart_tab_bstabs.min.css" rel="stylesheet" />

<!-- Bootstrap Tabs Theme -->
<link href="/path/to/dist/css/smart_tab_dark.min.css" rel="stylesheet" />

3. The required markup structure for the tabbed interface.

<div id="smarttab">

  <!-- Tabs -->
  <ul class="nav">
    <li>
      <a class="nav-link" href="#tab-1">
        Tab 1
      </a>
    </li>
    <li>
      <a class="nav-link" href="#tab-2">
        Tab 2
      </a>
    </li>
    <li>
      <a class="nav-link" href="#tab-3">
        Tab 3
      </a>
    </li>
  </ul>

  <!-- Tabbed Content -->
  <div class="tab-content">
    <div id="tab-1" class="tab-pane" role="tabpanel">
      Tab content 1
    </div>
    <div id="tab-2" class="tab-pane" role="tabpanel">
      Tab content 2
    </div>
    <div id="tab-3" class="tab-pane" role="tabpanel">
      Tab content 3
    </div>
  </div>
  
</div>

4. Call the plugin on the ton container and done.

$('#smarttab').smartTab();

5. Customize the plugin with the following options.

$('#smarttab').smartTab({

  // Selected Tab, 0 = first tab
  selected: 0,  

  // Theme
  theme: 'default',

  // Or 'vertical'
  orientation: 'horizontal',

  // Justified layout for tabs
  justified: true,

  // Auto adjust content height
  autoAdjustHeight: true,

  // Supports for Back button
  backButtonSupport: true,
  
  // Enables URL hash
  enableURLhash: true,
    
  // Configs animations here
  transition: {

    // none, fade, slide-horizontal, slide-vertical, slide-swing
    animation: 'none',

    // transition speed
    speed: '400',

    // easing function
    easing: ''

  },

  // Auto switches between tabs
  autoProgress: {
    
    // enable
    enabled: false,
    
    // interval in ms
    interval: 3500,

    // stop on focus
    stopOnFocus: true

  },

  // Keyboard navigation
  keyboardSettings: {

    // enable
    keyNavigation: true,

    // keycodes
    keyLeft: [37],
    keyRight: [39]

  }

});

6. Go to a specific tab.

$('#smarttab').smartTab("goToTab", tab_index);

7. Set/update options

$('#smarttab').smartTab("setOptions", options);

More Examples:

• Normal
• Bottom
• Multiple
• Vertical

Changelog:

2020-06-15

• v3.1.1: a few optimizations

2020-05-09

• v3.0.1: init method optimized

2020-05-04

• v3.0 All new tab.
• Updated doc.

2015-02-02

• update.

---

This awesome jQuery plugin is developed by techlab. For more Advanced Usages, please check the demo page or visit the official website.