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

File Size: 4.66 KB
Views Total: 5773
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="tab-con">
    <div class="j-tab-con">
        <div class="tab-con-item" style="display:block;">
            Tab 1
        <div class="tab-con-item">
            Tab 2
        <div class="tab-con-item">
            Tab 3

3. Call the function on the top plugin to initialize the tabs with default options.


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.


  // initial slide

  // selectors for next/prev buttons

  // CSS class of tabs

  // CSS class of tab panels

  // click or hover

  // or left, up, fadein

  // animation speed

  // animation delay

  // auto swtiching between tabs

  // auto swtich interval

This awesome jQuery plugin is developed by lkwfive. For more Advanced Usages, please check the demo page or visit the official website.