Clean & Complete

skinableTabs is an unobtrusive jQuery plugin allowing you to organize your content in attractively skinned tabs.
You can use skinableTabs with multiple positions, skins and transition effects. You can customize the look and feel of any skin
in a dedicated CSS file.

Skin 1

 
  1.  
  2. <link type="text/css" rel="stylesheet" href="skins/$$$skin$$$/$$$position$$$.css"></script>
  3. ...
  4. HTML
  5. ...
  6. <div class="tabs_holder">
  7.  <ul>
  8.   <li><a href="#your-tab-id-1">Nunc tincidunt</a></li>
  9.   <li class="tab_selected"><a href="#your-tab-id-2">Proin dolor</a></li>
  10.  </ul>
  11.  <div class="content_holder">
  12.   <div id="your-tab-id-1">
  13.    Some content tab 1.
  14.   </div>
  15.   <div id="your-tab-id-2">
  16.    Some content tab 2
  17.   </div>
  18.  </div><!-- /.content_holder -->
  19. </div><!-- /.tabs_holder -->
  20. ...
  21. Javascript
  22. ...
  23. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
  24. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
  25. <script type="text/javascript" src="skinable_tabs.min.js"></script>
  26. <script type="text/javascript">
  27.   $('.tabs_holder').skinableTabs({
  28.     effect: '$$$effect$$$',
  29.     skin: '$$$skin$$$',
  30.     position: '$$$position$$$'
  31.   });
  32. </script>
  33.  

You can have beautiful, clean, organized content!

Cras ut odio non odio auctor aliquam quis in sem. Fusce tristique tellus sit amet justo porta vitae blandit turpis porta. Donec vitae velit nulla. Vivamus aliquam, magna non tincidunt euismod, risus lorem euismod urna, nec consectetur mauris augue sed mauris. Curabitur ultricies laoreet orci vel placerat. In hac habitasse platea dictumst. Vivamus a turpis at elit auctor venenatis.

Nunc rhoncus magna in lorem gravida malesuada. Morbi at augue eros, nec tincidunt eros. Duis in magna sit amet augue commodo tincidunt. Ut vulputate semper lorem, nec tincidunt ipsum venenatis vel. Sed eros augue, lacinia sed rhoncus suscipit, sagittis eu mauris. Pellentesque vel risus nibh.

Cras ut odio non odio auctor aliquam quis in sem. Fusce tristique tellus sit amet justo porta vitae blandit turpis porta. Donec vitae velit nulla. Vivamus aliquam, magna non tincidunt euismod, risus lorem euismod urna, nec consectetur mauris augue sed mauris. Curabitur ultricies laoreet orci vel placerat. In hac habitasse platea dictumst. Vivamus a turpis at elit auctor venenatis. Nunc rhoncus magna in lorem gravida malesuada. Morbi at augue eros, nec tincidunt eros. Duis in magna sit amet augue commodo tincidunt. Ut vulputate semper lorem, nec tincidunt ipsum venenatis vel. Sed eros augue, lacinia sed rhoncus suscipit, sagittis eu mauris. Pellentesque vel risus nibh.

Cras ut odio non odio auctor aliquam quis in sem. Fusce tristique tellus sit amet justo porta vitae blandit turpis porta. Donec vitae velit nulla. Vivamus aliquam, magna non tincidunt euismod, risus lorem euismod urna, nec consectetur mauris augue sed mauris. Curabitur ultricies laoreet orci vel placerat. In hac habitasse platea dictumst. Vivamus a turpis at elit auctor venenatis.

Nunc rhoncus magna in lorem gravida malesuada. Morbi at augue eros, nec tincidunt eros. Duis in magna sit amet augue commodo tincidunt. Ut vulputate semper lorem, nec tincidunt ipsum venenatis vel. Sed eros augue, lacinia sed rhoncus suscipit, sagittis eu mauris. Pellentesque vel risus nibh.

Please wait while loading content.

This is a tooltip