Simple jQuery Tabs Plugin For Tabbed Content
File Size: | 6.91 KB |
---|---|
Views Total: | 2009 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple, lightweight jQuery plugin that provides a basic tab switcher logic to show and hide tabbed content by clicking nav tabs.
See also:
How to use it:
1. Create tabs and tabbed content on the page.
<div class="tabs-menu"> <div id="tab-1" class="tabs-menu-item active">Tab 1</div> <div id="tab-2" class="tabs-menu-item">Tab 2</div> <div id="tab-3" class="tabs-menu-item">Tab 3</div> </div> <div class="tabs"> <div class="tab tab-1 current"> Tab 1 Content </div> <div class="tab tab-2"> Tab 2 Content </div> <div class="tab tab-3"> Tab 3 Content </div> </div>
2. Show & hide tabbed content using CSS.
.tabs div { display:none; } .tabs div.current { display:block; }
3. Highlight the active tab.
.tabs-menu div.active { background:#000000; color:#ffffff; }
4. Load jQuery JavaScript library and the Simple-Tabs plugin at the end of the document. That's it.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery-simple-tabs.js"></script>
This awesome jQuery plugin is developed by SoulDesignerTom. For more Advanced Usages, please check the demo page or visit the official website.