Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome.

JQuery Code

$(document).ready(function(){
 
$("#first-tab").addClass('buttonHover');
});
 
function navigate_tabs(container, tab)
{ 
 $(".b").css('display' , 'none');
 $(".c").css('display' , 'none');
 $(".a").css('display' , 'none');
 
 $("#first-tab").removeClass('buttonHover');
 $("#second-tab").removeClass('buttonHover');
 $("#third-tab").removeClass('buttonHover');
 
 $("#"+tab).addClass('buttonHover');
 $("."+container).show('slow');
}

CSS

body{
 /* Setting default text color, background and a font stack */
 font-size:13px;
 background: #fff;
 font-family:Arial, Helvetica, sans-serif;
}
.b, .c{ display:none;}
 
#body em{ font-style:normal; font-size:36px;}

.buttons{
 border-bottom:solid #d1c8b8 4px;
 display:block;
 padding:8px;
 width:80px;-moz-border-radius: 1em 4em 1em 4em;
 border-radius: 1em 4em 1em 4em;
 text-align:center;
 margin:1px;
 background:#4b7975;
 text-decoration:none; color:#FFFFFF;
 float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
 
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

#body {
 background:#919b9d;
 text-align:justify;
 overflow:hidden;
 color:#fff;
 padding:20px;
 -moz-border-radius: 1em 4em 1em 4em;
 border-radius: 1em 4em 1em 4em; height:200px;
 width:272px;
}
 
#wrap{
 text-align:left;
 overflow:hidden;
 width:350px;
 height:380px;
}