Buzzdungeon

Nombre:: jQuery tabs
Autor:: Buzzdungeon

Demo

Tab 1
Tab 2
Tab 3

contenido del tab 1

contenido del tab 2

contenido del tab 3

Extra Contenido de tu <head>:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".cont:first").show();
   $(".tabs li a").click(function(){
      $(".cont").hide();
      $(".tabs li").not(this).removeClass("active");
      $(this).parent().addClass("active");   
      $($(this).attr("href")).fadeIn(250);
      return false;
   }); 
});
</script>
<style type="text/css">
.cont{ 
   display: none; 
   padding:8px; 
   color:#444; 
} 
.tabs{ 
   margin:0; 
   padding:0; 
   list-style: none; 
} 
.tabs li{ 
   padding:8px; 
   float: left; 
   border-right:1px solid #ddd; 
} 
.tabs li a{ 
   color:#666; 
   text-decoration: none; 
} 
.active{ 
   color:#000!important; 
   background: #fefefe!important; 
   font-weight: bold; 
} 
#tabs{ 
   border-top:1px solid #ddd; 
   clear: both; 
} 
.contenedor{ 
   background:#f6f6f6; 
   border: 1px solid #ddd; 
   width:500px; 
}
</style>

Donde quieras que aparezca:

<div class="contenedor"> 
   <ul class="tabs"> 
      <li class="active"><a href="#tab1">Tab 1</a></li> 
      <li><a href="#tab2">Tab 2</a></li> 
      <li><a href="#tab3">Tab 3</a></li> 
   </ul> 
   <div id="tabs"> 
      <div id="tab1" class="cont">contenido del tab 1</div> 
      <div id="tab2" class="cont">contenido del tab 2</div> 
      <div id="tab3" class="cont">contenido del tab 3</div> 
   </div> 
</div>