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

File Size: 37 KB
Views Total: 5751
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
      <li class="active">Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
  <div class="tabContent">
    <div class="tabItem active">
      Tab content 1
    <div class="tabItem">
      Tab content 2
    <div class="tabItem">
      Tab content 3

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 { background: #4D4F4C; }

.tabContent .active { display: block; }

.tabContent .tabItem { padding: 10px; }

3. Place jQuery library and the script at the end of the document to improve the page load speed.

<script src="//"></script>
<script src=""></script>

4. Call the function and done.


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

  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.