SEO-friendy jQuery Multi Tab Plugins – mari-tabs

mari-tabs is a semantic, SEO-friendly tabs plugin for jQuery that transforms lists of blocks into fancy tabs with smooth fade in and fade out animations. This plugin dependent on jQuery and GSAP (for smooth HTML5 animations).


Libraries

Include the following libraries on page.

<script src="mari-tabs.js"></script>

HTML

Create unordered lists for the tabs & tabbed content.

<div class="tab-wrap">
   <ul class="tabs-nav">
      <li class="active">
         Tab 1
      </li>
      <li>
         Tab 2
      </li>
      <li>
         Tab 3
      </li>
   </ul>
 
   <ul class="tabs-content">
      <li class="active-content">
         Content 1
      </li>
      <li>
         Content 2
      </li>
      <li>
         Content 3
      </li>
   </ul>
</div>



JS

Call the function on the tabbed content and specify the selector of tabs.

$(function(){
 
  $('.tabs-content').mariTabs({
    nav: '.tabs-nav'
  });
 
});
 
// Goto a specific tab.
// $('.tabs-content').mariTabs('goTo', 3);

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by lemehovskaya. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.