Usando tabify para un tab sencillo

DESCARGA : Ejemplo Tabify

//lo primero son  los estilos (estos pueden ser modificados ) no es necesario para que el script funcione

<style type="text/css" media="screen">
 body { font: 0.8em Arial, sans-serif; }
 .tabs { padding: 0; clear: both; }
 .tabs li { display: inline;}
 .tabs li a { background: #E1ECF7; padding: 10px; float:left;
 border: 1px solid #ccf;

 text-decoration: none; color: #000; font-weight: bold;width: 125px; }
 .tabs li.active a {
 background: white;
 line-height: 37px;
 margin-bottom: -1px;
 border: 1px solid #ccf;
 border-bottom: 0px solid #ccf;

 }
 .content_tab {
 float: left;
 clear: both;
 border: 1px solid #E0E0E0;
 border-top: none;
 padding: 10px 20px 20px;
 width: 399px;

 background: white;

 }
 </style>

Posteriormente es el código html

</pre>
<ul id="tabs" class="tabs">
 <li class="active">
 <a href="#description_videos">
 <img class="icon_titulo"style="float:left" src="http://dl.dropbox.com/u/10844849/develoteca/images/1351179056_television_basic_blue.png" />
 <br>VIDEOS
 </a>
 </li>

 <li>
 <a href="#description_galeria">
 <img class="icon_titulo"style="float:left" src="http://dl.dropbox.com/u/10844849/develoteca/images/1351179056_television_basic_blue.png" /><br>GALERIA
 </a>
 </li>

</ul>

<div id="description_videos" class="content_tab">
 <h2>Limerick One</h2>
 <p>
 So seldom are clean,<br />
 </p>
</div>
<div id="description_galeria" class="content_tab">
 <h2>---</h2>
 <p>

Cotnenido 2,<br />

 </p>
</div>
<pre>

Por ultimo parte clave es el código javascript

</pre>
<script src="jquery.js" type="text/javascript" charset="utf-8">
 </script>

<script src="jquery.tabify.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 // <![CDATA[
 $(document).ready(function () {
 $('#tabs').tabify();
 });

 // ]]>
</script>
<pre>

Descarga el ejemplo:

You may also like...