This blog is outdated! Go to for latest updates

Smart Tab - a javascript jquery tab control plugin


Smart Tab is a flexible jQuery(a JavaScript library) Tab Control plugin.

Current Version : 0.99



1. Basic Layout view demo
2. Vertical Layout view demo
2. Bottom Layout view demo


Version - 0.99(SmartTab - Download file from SourceForge

  • Customizable tab anchors, can use images.
  • AutoProgress:- option for automatic navigation of tabs.
  • AutoProgress can be stopped when mouse hover on control and restarts when not.
  • Keyboard Navigation:- Use left/right keyboard keys to navigate through tabs(try on demo).
  • Transition Effects:- option for fade/slide effects on tab transition.
  • Option for specifying the selected tab.
  • Easly can impliment Top, Bottom and Vertical style layout(see the demo).
  • Easy to implement, Minimal HTML required.
Getting Started:

Basic Usage:
With option parametrs:
      selected: 0,  // Selected Tab, 0 = first step   
      keyNavigation:true, // Enable/Disable key navigation
      autoProgress:false, // Auto navigate tabs on interval
      progressInterval: 3500, // Auto navigate Interval
      stopOnFocus:false, // Stops autoProgress on mouse hover and restarts when not
      transitionEffect:'none', // Effect on navigation, none/fade/slide
      tabContainerClass:'stContainer' // tab container css class name
Installing Smart Tab:

Step 1: Get the latest version of jQuery(
Step 2: Download the Smart Tab (
Step 3: Include following lines to head section of your html file (Make sure that the path to the files are correct).
<link href="styles/smart_tab.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.smartTab.js"></script>
Step 4: Copy the below lines to your head section
<script type="text/javascript">
Step 5: Copy the below html to the body section.
<div id="tabs" class="stContainer">

      <li><a href="#tabs-1">
            <img class='logoImage2' border="0" width="50px" src="images/Step1.png">
            <h2>Tab 1<br />

      <li><a href="#tabs-2">
            <img class='logoImage2' border="0" width="50px" src="images/Step2.png">
            <h2>Tab 2<br />

      <li><a href="#tabs-3">
            <img class='logoImage2' border="0" width="50px" src="images/Step3.png">
            <h2>Tab 3<br />

      <li><a href="#tabs-4">
            <img class='logoImage2' border="0" width="50px" src="images/Step4.png">
            <h2>Tab 4<br />

    <div id="tabs-1">
        <h2>Tab 1 Title</h2> 
        <p>Tab 1 Content here</p>     

    <div id="tabs-2">
        <h2>Tab 2 Title</h2> 
        <p>Tab 2 Content here</p>     
    <div id="tabs-3">
        <h2>Tab 3 Title</h2> 
        <p>Tab 3 Content here</p>                        

    <div id="tabs-4">
        <h2>Tab 4 Title</h2> 
        <p>Tab 4 Content here</p>

Finished: That all, you are set to Go. I'm happy to hear comments and feedback from you. Happy Coding!!!

Search This Blog