Lightweight jQuery Plugin For Tab Content - Tabs.js
File Size: | 8.59 KB |
---|---|
Views Total: | 1746 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery plugin for tab content where the users are able to swap between tabbed content by clicking tabs.
How to use it:
1. The required HTML structure for the tab content.
<div class="tabs--block" id="tabs"> <div class="tabs--header"> <div class="tab-head"><a href="javascript:;" rel="tab_1a"><span>tab_1</span></a></div> <div class="tab-head"><a href="javascript:;" rel="tab_2a"><span>tab_2</span></a></div> <div class="tab-head"><a href="javascript:;" rel="tab_3a"><span>tab_3</span></a></div> </div> <div class="tabs--content"> <div class="tab-content" id="tab_1a"> <h2>tab_1</h2> <p>Tab 1 content</p> </div> <div class="tab-content" id="tab_2a"> <h2>tab_2</h2> <p>Tab 2 content</p> </div> <div class="tab-content" id="tab_3a"> <h2>tab_3</h2> <p>Tab 3 content</p> </div> </div> </div>
2. Include jQuery library and the jQuery Tabs.js
script at the bottom of the page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="tabs.js"></script>
3. The JavaScript to create tabs for the tabbed content.
$('#tabs').createTabs();
4. Style the plugin whatever you like.
.tabs--block { overflow: hidden; margin-top: 30px } .tabs--header { font-size: 0; box-shadow: 0 -1px 0 #999 inset; white-space: nowrap } .tab-head { display: inline-block; vertical-align: middle; font-size: 1rem } .tab-head:last-child { border-right: 1px solid #999 } .tab-head a { display: block; height: 50px; line-height: 50px; padding: 0 20px; text-decoration: none; border-left: 1px solid #999; border-top: 1px solid #999; border-bottom: 1px solid #999; background: #eee } .tab-head__active a { background: #fff; color: #ccc; border-bottom: 1px solid #fff } .tab-head a span { display: inline-block; vertical-align: middle } .tabs--content { border: 1px solid #999; border-top: 0; padding: 10px 15px } .tab-content { display: none } .tab-content h2 { text-transform: uppercase }
5. The plugin also allows you to perform actions on each tab change.
$('#tabs').createTabs({ actions:{ 'ALL': function(){ // ... }, 'tab_2a': function(){ // ... }, 'tab_3a': function(){ // ... }, } });
This awesome jQuery plugin is developed by tishinskiy. For more Advanced Usages, please check the demo page or visit the official website.