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

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

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