Tab Control in one line of jQuery

How to create a Tab Control, people ask me this question so many times. So finally I have decided to post its simple solution here. This is very easy task. Lets understand.

We need tabs Title in <UL>, <LI> title. something like below:

 

 <!--This is Tab Control UL-->  
 <ul class="tab">  
      <li>Tab1</li>  
      <li>Tab2</li>  
      <li>Tab3</li>  
 </ul>  

Below is Tab Content UL, we have to strore data here

 <!--this is Tab Content UL, we have to strore data here-->  
 <ul class="tabContent">  
   <li style="display: block;">This text for Tab 1,<br />111 111 111</li>  
   <li>This text for Tab 2,<br />222 222 222</li>  
   <li>This text for Tab 3,<br />333 333 333</li>  
 </ul>   

Now add Below CSS: to give proper alignment.

 <style type="text/css">  
      .tab{position: relative;}  
      .tab li{list-style: none;float: left;border: solid 1px blue;padding: 10px;cursor: pointer;}  
      .tab li:hover{background-color: #c5c5c5;}  
      .tabContent{position: relative;clear: both;float: none;}  
      .tabContent li{list-style: none;position: absolute;height: 100px;width: 300px;display: none;border: solid 1px blue;}  
 </style>  

Now it will look properly as TAB control, but still we need to add jQuery to give activate the TAB controls.

 <script language="javascript" type="text/javascript">  
 $(document).ready(function () {  
      $('.tab li').click(function () {  
           ///Hide Old content  
           $('.tabContent li').fadeOut();  
           ///Show related content   
           $('.tabContent li:eq(' + $('li', $(this).parent()).index(this) + ')').fadeIn();  
      });  
 });  
 </script>  

How easy tab controls is!

Peace