Minimal Tabbed Navigation Plugin with jQuery - Simple Tabs

File Size: 51.6 KB
Views Total: 3037
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Tabbed Navigation Plugin with jQuery - Simple Tabs

Simple Tabs is a jQuery plugin for generating a good-looking tabbed navigation which allows the visitor to switch between panes of local content.

How to use it:

1. You first need to load the jQuery Simple Tabs script after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="js/min/simple-tabs-min.js"></script>

2. The HTML structure. Simple Tabs uses HTML5 data attributes as the basis for its functionality. Each tab is bound to its own content area by using an identical data attribute identifier.

<div class="tabs">

  <nav class="tabs-nav">

    <ul>
      <li data-tab="1"><span class="icon-info"></span></li>
      <li data-tab="2"><span class="icon-gear"></span></li>
      <li data-tab="3"><span class="icon-code"></span></li>
    </ul>

  </nav> 

  <div class="tab-container">

    <div class="tab-content" data-tab="1">

      Tab 1 content

    </div>

    <div class="tab-content" data-tab="2">

      Tab 2 content

    </div>

    <div class="tab-content" data-tab="3">

      Tab 3 content

    </div>

  </div>
  
</div>

3. Apply your own CSS styles to the tabs.

.tabs {
  ...
}

.tabs-nav ul {
  ...
}

.tab-container {
  ...
}

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