This time I will share jQuery Plugin and tutorial about Minimal Click- Or Hover-Triggered Tabs Plugin With jQuery – tab.js, hope it will help you in programming stack.
A super small (<1kb) and easy-to-use jQuery tabs plugin which allows the user to switch between tabbed panels by clicking or hovering tab headers.
How to use it:
1. The required html structure for the tabbed interface.
01 |
<div class="tab tab-demo"> |
02 |
<div class="tabHeader"> |
04 |
<li class="active">Tab 1</li> |
09 |
<div class="tabContent"> |
10 |
<div class="tabItem active"> |
2. Style the tabbed interface with the following CSS snippets.
04 |
border: 1px solid #ccc; |
09 |
.tabContent > div { display: none; } |
14 |
border-bottom: 1px solid #ccc; |
22 |
background: url(mesh.png) repeat; |
26 |
.tabHeader li.active { background: #4D4F4C; } |
28 |
.tabContent .active { display: block; } |
30 |
.tabContent .tabItem { padding: 10px; } |
3. Place jQuery library and the Query.tab.js script at the end of the document to improve the page load speed.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jQuery.tab.js"></script> |
4. Call the function and done.
5. Change the default trigger element to ‘hover’.
2 |
trigger_event_type: 'mouseover' |
This awesome jQuery plugin is developed by weihf. For more Advanced Usages, please check the demo page or visit the official website.
