Simple and Clean jQuery Plugin For Tab Based Inferface - Matt Tabs

Matt Tabs is a lightweight (~3kb minified) and simple jQuery plugin that turns a set of DIV containers into a tabbed interface, which allows multiple DIVs to be contained within a single container, using tabs as a navigational widget for switching between sets of DIVs.

You might also like:

• Flexible-jQuery-Tabbed-Interface-Plugin-SmartTab
• Tabbed Content Slider Plugin with jQuery and XML - tNews
• Google Play Tabbed Navigation with jQuery and CSS3
• Simple jQuery Tab Navigation Menu Plugin - simpleTab
• Android-Like jQuery Tab Navigation Plugin - ShiftyNav
• Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent
• Easy & Animated jQuery Tabbed Content Plugin - Tabulous

How to use it:

1. Add markup

<div class="set set-1">
<div class="panel panel-1">
<h2>Panel 1</h2>
<p>...</p>
</div>
<div class="panel panel-2">
<h2>Panel 2</h2>
<p>...</p>
</div>
<div class="panel panel-3">
<h2>Panel 3</h2>
<p>...</p>
</div>
<div class="panel panel-4">
<h2>Panel 4</h2>
<p>...</p>
</div>
</div>

2. The CSS for this sample

.set, .panel {
margin: 0 0 10px;
}
.tabs .panel {
padding: 10px;
}
.tabs-menu {
border-bottom: 1px solid #ccc;
padding: 0 10px;
}
.tabs-menu li {
display: inline-block;
 *display: inline;
zoom: 1;
margin: 0 3px -1px 0;
border: 1px solid #ccc;
border-radius: 3px 3px 0 0;
padding: 6px 12px;
background-color: #ededed;
cursor: pointer;
position: relative;
}
.tabs-menu .active-tab {
background-color: #fff;
border-bottom: 0;
padding-bottom: 7px;
}

3. Include jQuery library and jQuery Matt Tabs on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="src/js/mtabs.js"></script> 

4. Call the plugin

<script>
$(function() {
$(".set-1").mtabs();								
});
</script>

5. Possible options.

// Specifies class name(s) applied to the overall wrapping element.
container_class: 'tabs', 

// Specifies class name(s) applied to tabs content wrapping element.
tabs_container_class: 'tabs-content', 

// Specifies class name for currently active tab.
active_tab_class: 'active-tab', 

// Specifies element to generate the text from for each tab name.
tab_text_el: 'h1, h2, h3, h4, h5, h6', 

// Specifies class name(s) applied to the tabs menu element.
tabsmenu_class: 'tabs-menu', 

// Specifies element to use as a wrapper for tabs menu items.
tabsmenu_el: 'ul', 

// Templates used for building HTML structures. {0}: index of the menu item; {1}: Menu item text
tmpl: { 
  tabsmenu_tab: '<li class="tab-{0}"><span>{1}</span></li>'
},

// Optional callback function to be executed when tab switch occurs. 
// Receives the index of the selected tab as an argument. 
onTabSelect: null 

Change log:

2015-08-09

• update.

---

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