Super Simple jQuery Tabs Plugin - jptab
File Size: | 3.53 KB |
---|---|
Views Total: | 1322 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A dead simple jQuery plugin which allows you to organize DIV contents into a tab interface with minimal effort.
How to use it:
1. Load the jptab.js
script at the bottom of the web page, but after your jQuery library.
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/jptab.js"></script>
2. Create the tabbed navigation using Html list.
<div class="tabs"> <ul> <li class="active"><a href="#tab1">TAB1</a></li> <li><a href="#tab2">TAB2</a></li> <li><a href="#tab3">TAB3</a></li> </ul> </div>
3. Wrap your tabbed content into DIV containers.
<div id="tab1" class="tab-block"> <h3>Tab 1</h3> <p>...</p> </div> <div id="tab2" class="tab-block"> <h3>Tab 2</h3> <p>...</p> </div> <div id="tab3" class="tab-block"> <h3>Tab 3</h3> <p>...</p> </div>
4. Style the tab interface in your CSS.
.tabs ul { margin: 0; padding: 0; list-style: none; } .tabs ul li { float: left; padding: 10px; text-transform: uppercase; } .tabs ul li a { color: #ccc; text-decoration: none; } .tabs ul li.active { background-color: rgb(250, 250, 250); color: #fff; } .tabs ul li.active a { color: rgb(223, 117, 20); } .tabs ul li:last-child { border-left: none; } .tabs ul li:first-child { border-right: none; } .tab-block { background: rgb(250, 250, 250); clear: both; padding: 10px; }
5. Initialize the tabs plugin as follow.
$('.tab').jptab();
This awesome jQuery plugin is developed by jeanpan. For more Advanced Usages, please check the demo page or visit the official website.