Minimal Tabbing System In jQuery - Tabs.js

File Size: 6.73 KB
Views Total: 843
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Tabbing System In jQuery - Tabs.js

A lightweight and cross-browser tabbing system (also called tabs or tabbed content) that enables the user to navigate through tabs without reloading the whole page.

Fully customizable with CSS. Easy to implement with just a single JS call.

How to use it:

1. Add tab controls and tabbed content to the webpage.

<div id="my_tabs" class="example">
  <div class="controls">
    <a href="#" class="control active">Tab #1</a>
    <a href="#" class="control">Tab #2</a>
    <a href="#" class="control">Tab #3</a>
  </div>
  <div class="targets">
    <div class="target">
      <h2>Tab 1</h2>
    </div>
    <div class="target">
      <h2>Tab 2</h2>
    </div>
    <div class="target">
      <h2>Tab 3</h2>
    </div>
  </div>
</div>

2. Add both jQuery library and the jQuery tabs.js to the webpage.

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

3. Initialize the plugin on document ready.

$(function() {
  $('#my_tabs').tabs();
});

4. Style the tabbing system whatever you like.

.example {
  display: block;
  clear: both;
  overflow: hidden;
  display: block;
}

.example .controls {
  float: left;
  margin: 20px 0 0;
  border-bottom: 1px solid #999999;
  padding-left: 20px;
  display: block;
  width: 100%;
  clear: both;
}

.example .controls .control {
  text-decoration: none;
  background-color: #cccccc;
  display: inline-block;
  float: left;
  font-weight: bold;
  color: #000000 !important;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 10px 20px;
  margin-right: 5px;
  border: 1px solid #999999;
  border-bottom: none;
}

.example .controls .control.active {
  border-bottom: 1px solid #ffffff;
  margin-bottom: -1px !important;
  background-color: #ffffff;
}

.example .targets {
  float: left;
  clear: none;
  min-height: 400px;
  display: block;
  width: 100%;
  border: 1px solid #999999;
  border-top: none;
  overflow: hidden;
  clear: both;
  padding: 20px 30px;
}

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