Very Simple and Easy to Apply jQuery Tabs

I hope for all perfect mode with jQuery magic so this post will be very light and interesting for jQuery beginners to apply, "so this post mainly for training purpose and at the end of post you will find the plugin itself to make every thing tabs with few changes"

all what you want three anchor elements and three div elements with the following structure and styles

1- HTML Source

 <div id="tabs">  
     <a href="javascript:void(0);" class="tab selected">  
       First Tab  
     </a>  
     <a href="div02" class="tab">  
       Second Tab  
     </a>  
     <a href="div03" class="tab">  
       Third Tab  
     </a>  
   </div>    
   <div id="div01" class="tabdiv">  
     <b>First Tab </b>  
   </div>  
   <div id="div02" class="tabdiv" style="display: none;">  
     <b>Second Tab </b>  
   </div>  
   <div id="div03" class="tabdiv" style="display: none;">  
     <b>Third Tab</b>  
   </div>  

2- Script Source

 <script type="text/javascript">  
     $(document).ready(function () {  
       // declare an temporary variable for href value 'by default the first tab is selected'  
       var tempHref = 'div01';  
       $('a.tab').click(function () {  
         if ($(this).hasClass('selected'))  
           return;  
         // re-assign the href value for the anchor element that had 'selected' class  
         $('a.selected').attr('href', tempHref);  
         $('a.selected').removeClass('selected');  
         // we will save the clicked anchor element href value // the id of the crossponding div  
         tempHref = $(this).attr('href');  
         $(this).attr('href', 'javascript:void(0);');  
         $(this).addClass('selected');  
         // hide all div  
         $('div.tabdiv').hide();  
         $('#' + tempHref).show();  
       });  
     });  
   </script>

3- CSS Source

 .tab:link, .tab:visited, .tab:hover  
 {  
   width: 100px; /* width can be auto*/  
   height: 25px;  
   text-align: center;  
   color: Gray;  
   background-color: White;  
   border: 1px solid Gray;  
   text-decoration: none;  
   margin: 3px 3px 3px 0px;  
   padding: 3px;  
 }  
 .selected:link, .selected:visited, .selected:hover  
 {  
   color: Gray;  
   font-size: 15px;  
   font-weight: bold;  
   border-bottom: 0;  
   padding: 3px 3px 1px 3px;  
 }  
 .tabdiv  
 {  
   width: 500px; /* width can be auto*/  
   height: 250px;  
   border: 1px solid Gray;  
   float: left; /* for english and for arabic it should be right floated */  
   text-align: left; /* for english and for arabic it should be right aligned */  
   padding: 5px;  
 }  

New Added Plugin for Any Thing Tabs

to apply the new plugin just do the following

• Add reference for the plugin "you can get it from Tabs-1.0.js"
• Replace the Script Source with the following script

 <script type="text/javascript">  
     $(document).ready(function () {  
       $('a.tab').tabs({  
         defaultTabID: 'div01',  
         tabClass: 'tabdiv',  
         selectedClass: 'selected'  
       });  
     });  
   </script>  

• defaultTabID: is the default tab that should be selected at first
• tabClass: is the common class for each corresponding div elements
• selectedClass: is the class to be assigned by the plugin to the selected tab

Have fun and you can get a complete sample here

Note: Styles may be not standard with all versions of all browser so you can customize them as you want