Minimal Click- Or Hover-Triggered Tabs Plugin With jQuery - tab.js

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.

<div class="tab tab-demo">
  <div class="tabHeader">
    <ul>
      <li class="active">Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
  </div>
  <div class="tabContent">
    <div class="tabItem active">
      Tab content 1
    </div>
    <div class="tabItem">
      Tab content 2
    </div>
    <div class="tabItem">
      Tab content 3
    </div>
  </div>
</div>

2. Style the tabbed interface with the following CSS snippets.

.tab {
  width: 600px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 20px auto;
  background: #fff;
}

.tabContent > div { display: none; }

.tabHeader {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

.tabHeader li {
  float: left;
  width: 200px;
  text-align: center;
  cursor: pointer;
  background: url(mesh.png) repeat;
  color: #EFEFEF;
}

.tabHeader li.active { background: #4D4F4C; }

.tabContent .active { display: block; }

.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.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery.tab.js"></script>

4. Call the function and done.

$('.tab-demo').tab();

5. Change the default trigger element to 'hover'.

$('.tab-demo').tab({
  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.