jQuery Plugin To Switch Tabs On Hover Or Button Click - rTabs
File Size: | 4.66 KB |
---|---|
Views Total: | 5663 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight, CSS-less jQuery tabs plugin which allows to switch between tab panels by hovering over the tabs or on click.
More features:
- Allows to switch between tabs programmatically via URL hashtags.
- Slide or fade animations when switching between tabs.
- Auto switch between tabs at a certain speed.
- Prev/next buttons are supported as well.
How to use it:
1. Download and place the jQuery rTabs' script rTabs.js
after jQuery library and we're ready to go.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="rTabs.js"></script>
2. Add the tab navigation and tab panels to the webpage as follow:
<div class="tab" id="demo"> <div class="tab-nav j-tab-nav"> <a href="javascript:void(0);" show-index="show-tab1">Tab1</a> <a href="javascript:void(0);" show-index="show-tab2">Tab2</a> <a href="javascript:void(0);" show-index="show-tab3">Tab3</a> </div> <div class="tab-con"> <div class="j-tab-con"> <div class="tab-con-item" style="display:block;"> Tab 1 </div> <div class="tab-con-item"> Tab 2 </div> <div class="tab-con-item"> Tab 3 </div> </div> </div> </div>
3. Call the function on the top plugin to initialize the tabs with default options.
$("#demo").rTabs();
4. Apply your own CSS styles to the tabs.
.tab { position: relative; width: 400px; height: 230px; overflow: hidden; margin: 0 auto 20px auto; } .tab-nav { height: 30px; overflow: hidden; background: #f5f5f5; } .tab-nav a { display: block; float: left; width: 80px; height: 30px; line-height: 30px; text-align: center; text-decoration: none; color: #999; } .tab-nav a.current { background: #1ABC9C; color: #fff; } .tab-con { position: relative; width: 400px; height: 200px; overflow: hidden; background: #1ABC9C; } .tab-con-item { display: none; width: 400px; height: 180px; line-height: 180px; text-align: center; color: #fff; }
5. Create anchor links if you want to open specific tab via href.
<a href="#show-tab1">Tab 1</a> <a href="#show-tab2">Tab 2</a> <a href="#show-tab3">Tab 3</a>
6. All customization options with default values.
$("#demo").rTabs({ // initial slide defaultShow:0, // selectors for next/prev buttons prev:'#prev', next:'#next', // CSS class of tabs btnClass:'.j-tab-nav', // CSS class of tab panels conClass:'.j-tab-con', // click or hover bind:'hover', // or left, up, fadein animation:'0', // animation speed speed:300, // animation delay delay:200, // auto swtiching between tabs auto:true, // auto swtich interval autoSpeed:3000 });
This awesome jQuery plugin is developed by lkwfive. For more Advanced Usages, please check the demo page or visit the official website.