Jquery tabs

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/*buzzdungeon.es.tl*/
$(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>

<!--buzzdungeon.es.tl-->
<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>

/*buzzdungeon.es.tl*/
.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;
}