Super Simple jQuery Tabs Plugin - jptab

A dead simple jQuery plugin which allows you to organize DIV contents into a tab interface with minimal effort.

How to use it:

1. Load the jptab.js script at the bottom of the web page, but after your jQuery library.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jptab.js"></script>

2. Create the tabbed navigation using Html list.

<div class="tabs">
  <ul>
    <li class="active"><a href="#tab1">TAB1</a></li>
    <li><a href="#tab2">TAB2</a></li>
    <li><a href="#tab3">TAB3</a></li>
  </ul>
</div>

3. Wrap your tabbed content into DIV containers.

<div id="tab1" class="tab-block">
  <h3>Tab 1</h3>
  <p>...</p>
</div>
<div id="tab2" class="tab-block">
  <h3>Tab 2</h3>
  <p>...</p>
</div>
<div id="tab3" class="tab-block">
  <h3>Tab 3</h3>
  <p>...</p>
</div>

4. Style the tab interface in your CSS.

.tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs ul li {
  float: left;
  padding: 10px;
  text-transform: uppercase;
}

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

.tabs ul li.active {
  background-color: rgb(250, 250, 250);
  color: #fff;
}

.tabs ul li.active a { color: rgb(223, 117, 20); }

.tabs ul li:last-child { border-left: none; }

.tabs ul li:first-child { border-right: none; }

.tab-block {
  background: rgb(250, 250, 250);
  clear: both;
  padding: 10px;
}

5. Initialize the tabs plugin as follow.

 $('.tab').jptab();

---

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