Minimal Tabbing System In jQuery - Tabs.js

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

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.