Easy Tab Switch Plugin For jQuery - Tabs.js

A lightweight yet configurable jQuery plugin for creating HTML list based tabs to switch between tabbed content with custom HTML DOM Events.

More Features:

• Allows AJAX content via callback.
• Time to wait before showing content after switching.
• Allows you to specify the init tab on page load.
• Easy to style using your own CSS.

How to use it:

1. Create a list of tabs pointing to the corresponding tabbed content as follow:

<ul class="tabs" id="texample">
  <li rel="#tab1">Tab 1</li>
  <li rel="#tab2">Tab 2</li>
  <li rel="#tab3">Tab 3</li>
</ul>
<div id="newDom">
  <div id="tab1" class="tab-contx"><p>Content 1</p></div>
  <div id="tab2" class="tab-contx hide"><p>Content 2</p></div>
  <div id="tab3" class="tab-contx hide"><p>Content 3</p></div>
</div>

2. Load the main JavaScript tabs.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/tabs.js"></script>

3. Call the plugin on the tab list.

$('#example').tabs();

4. The example CSS to style the tabs.

ul {
  list-style: none;
}

.tabs {
  float:left;
  width:100%;
  background:#b70002;
}

.tabs li {
  float:left;
  margin:2px 2px 0;
  padding:6px 20px;
  border-radius:3px 3px 0 0;
  color:#fff;
  text-decoration:none;
}

.tabs li.selected {
  background:#fff;
  color:#C30;
}

.tabs li a {
  color:#fff;
  text-decoration:none;
}

.tabs li.selected a {
  color:#C30;
}

.tab-contx {
  width:100%;
}

.tab-contx p {
  padding:5px;
}

.hide {
  display: none;
}

5. Available configuration options.

$('#example').tabs({

  // initial tab index
  start: 0,

  // custom JavaScript event
  event: "click", 

  // delay in ms
  delay: 200,

  // CSS class of selected tab
  selected: ".selected", 

  // callback function
  callback: $.noop
  
});

---

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