jQuery Plugin To Switch Tabs On Hover Or Button Click - rTabs

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.