sTabs jQuery plugin by Smasty

Tiny plugin which makes tabs feature from simple unordered lists.

Download

jquery.sTabs.js - Default package, 1,31 kB
jquery.sTabs.min.js - Minified package, 1,04 kB

API

These options are available for the plugin:

int startWith: default: 1
Number of tab to activate as first.
string eventType: default: 'click'
Event to handle changing tabs. Must be a valid jQuery.bind() event type.
bool animate: default: false
Whether or not animate changing tabs.
int duration: default: 300
Duration of animation in miliseconds.

Options should be passed to plugin as an object.

Demo

Default functionality

$(function(){
  $('#default').sTabs();
});

First Tab
Second Tab
Third Tab
HTML for this example

Lorem ipsum dolor

Eu ornare id enim mollis laoreet vel Vestibulum id Ut ligula. Accumsan pulvinar congue egestas Cras Phasellus risus rutrum lobortis et Phasellus. Id netus id ultrices faucibus congue a eget rutrum laoreet ridiculus. Nec Donec malesuada turpis faucibus fermentum mauris eget sem Vestibulum Duis. Ut id urna orci a lobortis.

Id risus Pellentesque Morbi urna elit sodales turpis hendrerit auctor nunc. Ipsum cursus velit Lorem et wisi Maecenas quis in ante Sed. Tellus malesuada dis a ut Nunc ipsum id tincidunt.

Sollicitudin urna

Sollicitudin urna Praesent turpis tincidunt id eros Pellentesque et pede nisl. Dolor tempor laoreet feugiat at Nulla libero facilisi laoreet Vestibulum consequat. Ut Sed nulla mauris at libero semper Maecenas morbi leo quis. Wisi quis Donec lacus Vivamus laoreet sagittis suscipit fringilla orci venenatis. Adipiscing porttitor elit pellentesque neque dui lacus dignissim semper tincidunt feugiat.

Id risus Pellentesque Morbi urna elit sodales turpis hendrerit auctor nunc. Ipsum cursus velit Lorem et wisi Maecenas quis in ante Sed. Tellus malesuada dis a ut Nunc ipsum id tincidunt.

Eu ornare id

Id risus Pellentesque Morbi urna elit sodales turpis hendrerit auctor nunc. Ipsum cursus velit Lorem et wisi Maecenas quis in ante Sed. Tellus malesuada dis a ut Nunc ipsum id tincidunt.

HTML for this example

  <ul id="default">
    <li><a href="#def-first">First Tab</a></li>
    <li><a href="#def-second">Second Tab</a></li>
    <li><a href="#def-third">Third Tab</a></li>
    <li><a href="#def-code">HTML for this example</a></li>
  </ul>
  
  <div id="def-first">
    ...
  </div>
  <div id="def-second">
    ...
  </div>
  <div id="def-third">
    ...
  </div>
  <div id="def-code">
    ...
  </div>

Additional parameters

$(function(){
  $('#options').sTabs({animate: true, eventType: 'mouseover'});
});

First Tab
Second Tab
Third Tab
HTML for this example

Lorem ipsum dolor

Id risus Pellentesque Morbi urna elit sodales turpis hendrerit auctor nunc. Ipsum cursus velit Lorem et wisi Maecenas quis in ante Sed. Tellus malesuada dis a ut Nunc ipsum id tincidunt.

Sollicitudin urna

Id risus Pellentesque Morbi urna elit sodales turpis hendrerit auctor nunc. Ipsum cursus velit Lorem et wisi Maecenas quis in ante Sed. Tellus malesuada dis a ut Nunc ipsum id tincidunt.

Eu ornare id

Id risus Pellentesque Morbi urna elit sodales turpis hendrerit auctor nunc. Ipsum cursus velit Lorem et wisi Maecenas quis in ante Sed. Tellus malesuada dis a ut Nunc ipsum id tincidunt.

HTML for this example

  <ul id="options">
    <li><a href="#opts-first">First Tab</a></li>
    <li><a href="#opts-second">Second Tab</a></li>
    <li><a href="#opts-third">Third Tab</a></li>
    <li><a href="#opts-code">HTML for this example</a></li>
  </ul>
  
  <div id="opts-first">
    ...
  </div>
  <div id="opts-second">
    ...
  </div>
  <div id="opts-third">
    ...
  </div>
  <div id="opts-code">
    ...
  </div>