Small jQuery Tabbing Plugin With URL Hash Support - myTabs.js

File Size: 16.2 KB
Views Total: 1093
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Small jQuery Tabbing Plugin With URL Hash Support - myTabs.js

myTabs.js is a simple, easy-to-style jQuery tabbing plugin to switch between tabbed content by clicking on the associated tab navigation. Also supports hashChange event that allows toopen tabs by passing hash on url.

How to use it:

1. Create the tabbed content sections as follow.

<div class="myTabs_container">
  <div class="myTabs_contents tabs-container" data-contents="tab1">
    Tab 1
  </div>
  <div class="myTabs_contents tabs-container" data-contents="tab2">
    Tab 2
  </div>
  <div class="myTabs_contents tabs-container" data-contents="tab3">
    Tab 3
  </div>
  ...
</div>

2. Create the tab navigation as follow. You can add as many as you want of tabs, Just make sure that 'data-contents' & 'data-switch' have the same value.

<ul class="myTabs">
  <li><a data-switch="tab1" class="myTabs_switch default" href="#tab1">Tab 1</a></li>
  <li><a data-switch="tab2" class="myTabs_switch" href="#tab2">Tab 2</a></li>
  <li><a data-switch="tab3" class="myTabs_switch" href="#tab3">Tab 3</a></li>
  ...
</ul>

3. Activate the plugin by calling the function on the 'myTabs_container' element.

$('#myTabs_container').myTabs('index');

4. Customize the tabs interface using your own CSS styles.

.tabs-container {
  min-height: 30px;
  background-color: rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(236, 236, 236);
  border-image: initial;
  padding: 20px;
}

.myTabs_contents { display: none; }

.myTabs_contents.active { display: block; }

.myTabs {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -15px;
  margin-right: -15px;
}

.myTabs a.myTabs_switch {
  display: block;
  padding: 12px;
  background-color: #fbfbfb;
  border-bottom: 1px solid #f1f1f1;
  color: #303050;
}

.myTabs li:last-of-type a.myTabs_switch { border-bottom: 0; }

.myTabs a.myTabs_switch.active {
  background-color: #efefef;
  border-left: 2px solid #00a8ff;
  border-bottom: 0;
}

.myTabs a.myTabs_switch:hover {
  color: #fbfbfb;
  background-color: #00a8ff;
}

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