Handy Animated Tab Plugins With jQuery - tabs.js
File Size: | 3.66 KB |
---|---|
Views Total: | 2766 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight, flexible jQuery tabs plugin that automatically creates tabs from an HTML unordered list, which link to block elements on the webpage.
How to use it:
1. Create an unordered list and link the list items to the tab panels using HTML5 data-panel-name
attributes as follows:
<div class="tab-panels"> <ul class="tabs"> <li data-panel-name="panel1" class="active">panel 1</li> <li data-panel-name="panel2">panel 2</li> <li data-panel-name="panel3">panel 3</li> <li data-panel-name="panel4">panel 4</li> </ul> <div id="panel1" class="panel active"> Content for Panel 1 here </div> <div id="panel2" class="panel"> Content for Panel 2 here </div> <div id="panel3" class="panel"> Content for Panel 3 here </div> <div id="panel4" class="panel"> Content for Panel 4 here </div> </div>
2. The sample CSS styles for the tabs interface.
.tab-panels ul { margin: 0; padding: 0; } .tab-panels ul li { list-style-type: none; display: inline-block; background: #999; margin: 0; padding: 3px 10px; border-radius: 10px 10px 0 0; color: #fff; font-weight: 200; cursor: pointer; } .tab-panels ul li:hover { color: #fff; background: #666; } .tab-panels ul li.active { color: #fff; background: #666; } .tab-panels .panel { display: none; background: #c9c9c9; padding: 30px; border-radius: 0 0 10px 10px; } .tab-panels .panel.active { display: block; }
3. Include both jQuery library and the jQuery tabs.js script at the end of the webpage. That's it.
<script src="jquery.min.js"></script> <script src="js/tabs.js"></script>
This awesome jQuery plugin is developed by mattchambers. For more Advanced Usages, please check the demo page or visit the official website.