mtabs.js demos
https://github.com/sladex/mtabs.js
http://sladex.org/mtabs.js/
Basic example
You should allways specify 'selected' class in your markup and put tabs in the same level in DOM.
<div id="mbabs-demo-1">
<div>
<a class="mtabs-link mtabs-selected" href="#mbabs-content-1">Tab 1</a>
<a class="mtabs-link" href="#mbabs-content-2">Tab 2</a>
<a class="mtabs-link" href="#mbabs-content-3">Tab 3</a>
</div>
<div class="mtabs-content" id="mbabs-content-1">Lorem ipsum dolor sit amet...</div>
<div class="mtabs-content" id="mbabs-content-2">Suspendisse pharetra ullamcorper...</div>
<div class="mtabs-content" id="mbabs-content-3">Sed eget nulla eget ante imperdiet...</div>
</div>
<script src="js/classList.min.js"></script>
<script src="js/mtabs.min.js"></script>
<script>
mtabs('mbabs-demo-1');
</script>
In order to support old browsers (IE8-IE9, Android 2-2.3), you'll need to include classList polyfill.
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel massa nec mauris pharetra fringilla. Duis et nunc turpis. Nulla viverra augue dapibus pellentesque euismod. Mauris bibendum nulla non metus accumsan, ut vulputate velit ornare. Donec nibh nulla, varius quis eros vel, ullamcorper faucibus justo. Nam lorem eros, rhoncus vulputate rutrum quis, elementum eu orci. Duis molestie, magna non vestibulum pulvinar, enim est tempus neque, in facilisis massa velit eu lectus. Nam nec augue ut massa gravida malesuada. Duis id nisi quam. Curabitur commodo iaculis dui, non pharetra velit sodales id. Curabitur ac lacus id purus adipiscing tincidunt vitae quis odio. Morbi vitae eleifend metus. Curabitur hendrerit velit eros, vel euismod urna tincidunt vel.
Suspendisse pharetra ullamcorper eros eu sollicitudin. Sed eget tempor dolor, venenatis facilisis quam. Cras at facilisis orci. Nulla consequat mauris eros, sed adipiscing nisi accumsan ac. Vivamus quis mi in neque lobortis convallis eu in quam. Pellentesque cursus nec ante tempor mollis. Suspendisse tempus dui libero, a faucibus lorem ultricies et. Vestibulum blandit urna sit amet est blandit, eget mattis nisl rhoncus.
Sed eget nulla eget ante imperdiet lobortis. Etiam mi neque, imperdiet in aliquet ac, ultrices nec ipsum. Aliquam tortor tortor, ullamcorper a mi in, sollicitudin venenatis nunc. Quisque purus nulla, semper et nunc ac, congue pretium metus. Donec lobortis nisi et interdum porttitor. Sed sagittis diam magna. Duis vestibulum fringilla metus, eu euismod nunc fermentum id. Donec at pellentesque dui. Nunc commodo feugiat lacinia. Ut at porta libero, in dapibus lacus.
Add selected class for wrapper
Sometimes you might need to perform tab switch by firing event on one element and change 'selected' class on one of the parents elements.
<div id="mbabs-demo-2">
<div>
<span class="mtabs-link-wrap mtabs-selected">
<a class="mtabs-link" href="#mbabs-demo-2-content-1" data-mtabs="1">Tab 1</a>
</span>
<span class="mtabs-link-wrap mtabs-selected">
<a class="mtabs-link" href="#mbabs-demo-2-content-2" data-mtabs="1">Tab 2</a>
</span>
<span class="mtabs-link-wrap mtabs-selected">
<a class="mtabs-link" href="#mbabs-demo-2-content-2" data-mtabs="1">Tab 3</a>
</span>
</div>
<div class="mtabs-content" id="mbabs-demo-2-content-1">...</div>
<div class="mtabs-content" id="mbabs-demo-2-content-2">...</div>
<div class="mtabs-content" id="mbabs-demo-2-content-3">...</div>
</div>
<script src="js/mtabs.min.js"></script>
<script>
mtabs('mbabs-demo-2');
</script>
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel massa nec mauris pharetra fringilla. Duis et nunc turpis. Nulla viverra augue dapibus pellentesque euismod. Mauris bibendum nulla non metus accumsan, ut vulputate velit ornare. Donec nibh nulla, varius quis eros vel, ullamcorper faucibus justo. Nam lorem eros, rhoncus vulputate rutrum quis, elementum eu orci. Duis molestie, magna non vestibulum pulvinar, enim est tempus neque, in facilisis massa velit eu lectus. Nam nec augue ut massa gravida malesuada. Duis id nisi quam. Curabitur commodo iaculis dui, non pharetra velit sodales id. Curabitur ac lacus id purus adipiscing tincidunt vitae quis odio. Morbi vitae eleifend metus. Curabitur hendrerit velit eros, vel euismod urna tincidunt vel.
Suspendisse pharetra ullamcorper eros eu sollicitudin. Sed eget tempor dolor, venenatis facilisis quam. Cras at facilisis orci. Nulla consequat mauris eros, sed adipiscing nisi accumsan ac. Vivamus quis mi in neque lobortis convallis eu in quam. Pellentesque cursus nec ante tempor mollis. Suspendisse tempus dui libero, a faucibus lorem ultricies et. Vestibulum blandit urna sit amet est blandit, eget mattis nisl rhoncus.
Sed eget nulla eget ante imperdiet lobortis. Etiam mi neque, imperdiet in aliquet ac, ultrices nec ipsum. Aliquam tortor tortor, ullamcorper a mi in, sollicitudin venenatis nunc. Quisque purus nulla, semper et nunc ac, congue pretium metus. Donec lobortis nisi et interdum porttitor. Sed sagittis diam magna. Duis vestibulum fringilla metus, eu euismod nunc fermentum id. Donec at pellentesque dui. Nunc commodo feugiat lacinia. Ut at porta libero, in dapibus lacus.
Dealing with options
There is a number of options you are able to specify.
<div id="mbabs-demo-3">
<div>
<a class="mtabs-link mtabs-selected" href="#mbabs-demo-3-content-1">Tab 1</a>
<a class="mtabs-link" href="#mbabs-demo-3-content-2">Tab 2</a>
<a class="mtabs-link" href="#mbabs-demo-3-content-3">Tab 3</a>
</div>
<div class="mtabs-content" id="mbabs-demo-3-content-1">...</div>
<div class="mtabs-content" id="mbabs-demo-3-content-2">...</div>
<div class="mtabs-content" id="mbabs-demo-3-content-3">...</div>
</div>
<script src="js/mtabs.min.js"></script>
<script>
mtabs('mbabs-demo-3', {
index: 2, // number of tab to load, default: 0
sclass: 'mtabs-selected', // selected class name, default: 'mtabs-selected'
ev: 'mouseover', // change tab on this event (e.g. mouseover, mousedown, dblclick, etc.), default: 'click'
hash: true, // follow the location.hash value (it will overwrite index property), default: true
cb: function (index, tabs, tabsC, tabsL) { // callback function, default: null
console.log(this); // current tab
console.log(index); // numeric index of this tab
console.log(tabs); // array of all tabs
console.log(tabsC); // array of the elements linked to the tabs
console.log(tabsL); // array on all tabs links (look wrapper expample)
}
});
</script>
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel massa nec mauris pharetra fringilla. Duis et nunc turpis. Nulla viverra augue dapibus pellentesque euismod. Mauris bibendum nulla non metus accumsan, ut vulputate velit ornare. Donec nibh nulla, varius quis eros vel, ullamcorper faucibus justo. Nam lorem eros, rhoncus vulputate rutrum quis, elementum eu orci. Duis molestie, magna non vestibulum pulvinar, enim est tempus neque, in facilisis massa velit eu lectus. Nam nec augue ut massa gravida malesuada. Duis id nisi quam. Curabitur commodo iaculis dui, non pharetra velit sodales id. Curabitur ac lacus id purus adipiscing tincidunt vitae quis odio. Morbi vitae eleifend metus. Curabitur hendrerit velit eros, vel euismod urna tincidunt vel.
Suspendisse pharetra ullamcorper eros eu sollicitudin. Sed eget tempor dolor, venenatis facilisis quam. Cras at facilisis orci. Nulla consequat mauris eros, sed adipiscing nisi accumsan ac. Vivamus quis mi in neque lobortis convallis eu in quam. Pellentesque cursus nec ante tempor mollis. Suspendisse tempus dui libero, a faucibus lorem ultricies et. Vestibulum blandit urna sit amet est blandit, eget mattis nisl rhoncus.
Sed eget nulla eget ante imperdiet lobortis. Etiam mi neque, imperdiet in aliquet ac, ultrices nec ipsum. Aliquam tortor tortor, ullamcorper a mi in, sollicitudin venenatis nunc. Quisque purus nulla, semper et nunc ac, congue pretium metus. Donec lobortis nisi et interdum porttitor. Sed sagittis diam magna. Duis vestibulum fringilla metus, eu euismod nunc fermentum id. Donec at pellentesque dui. Nunc commodo feugiat lacinia. Ut at porta libero, in dapibus lacus.