Simple and lightweight tabs with jQuery

A Habr user called Lzhedmitriy was not happy with the horizontal text tabs he found on the internet. As a result a simple jQuery plugin that does what he needed was born in 15 minutes. He decided to share it and I decided it is worth keeping for history - maybe I will use it somewhere.

The number of tabs is not limited. He also tried to keep the structure as simple as possible, because in his case the customer had to be able to figure it out and add new tabs without any trouble.

HTML structure:

<div class="tabs">
    <ul>
        <li>First tab</li>
        <li>Second tab</li>
        <li>Third tab</li>
    </ul>
    <div>
        <div>First content</div>
        <div>Second content</div>
        <div>Third content</div>
    </div>            
</div>

CSS styles:

.tabs{
    display:inline-block;
}
.tabs > div{
    padding-top:10px;
}
.tabs ul{
    margin:0px;
    padding:0px;
}
.tabs ul:after{
    content:"";
    display:block;
    clear:both;
    height:5px;
    background:#46c765;
}
.tabs ul li{
    margin:0px;
    padding:0px;
    cursor:pointer;
    display:block;
    float:left;
    padding:10px 15px;
    background:#e9eaeb;
    color:#707070;
}
.tabs ul li.active, .tabs ul li.active:hover{
    background:#46c765;
    color:#fff;
}
.tabs ul li:hover{
    background:#d6d6d7;
}

Attach the plugin:

$(document).ready(function(){
  $(".tabs").lightTabs();
});

The plugin code itself:

(function($){				
  jQuery.fn.lightTabs = function(options){

    var createTabs = function(){
      tabs = this;
      i = 0;

      showPage = function(i){
        $(tabs).children("div").children("div").hide();
        $(tabs).children("div").children("div").eq(i).show();
        $(tabs).children("ul").children("li").removeClass("active");
        $(tabs).children("ul").children("li").eq(i).addClass("active");
      }

      showPage(0);				

      $(tabs).children("ul").children("li").each(function(index, element){
        $(element).attr("data-page", i);
        i++;                        
      });

      $(tabs).children("ul").children("li").click(function(){
        showPage(parseInt($(this).attr("data-page")));
      });				
    };		
    return this.each(createTabs);
  };
})(jQuery);

The demo is here: jsfiddle.net/du9cbd9j
The original article can be read here: habrahabr.ru/sandbox/91471/