Sistema de pestañas en las entradas con JQuery

Tweet

Hace tiempo que quería implementar este sistema de pestañas en mis entradas, por una parte porque quiero (en un futuro cercano, si encuentro colaborador) editar en dos o tres idiomas el blog y por otro lado, al mostrar tanto código en las entradas, estas se hacen muy largas.

Para implementarlo he usado un plugin de JQuery creado por Web Output de Dirk Ginader.

Os dejo todo lo necesario y en la próxima entrada entramos en detalle.

CSS

.tabs {
float:left;
width:550px;
line-height:normal;
}
.tabbody {
border-left: 1px solid #ac1f1f;
border-right: 1px solid #ac1f1f;
border-bottom: 1px solid #ac1f1f;
border-top: 1px solid #ac1f1f;
width: 500px;
margin: -5px 0 0 10px;

}

.tabs ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
.tabs ul li {
float:left;
background:url("URL IMAGEN 1") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
.tabs ul a {
float:left;
display:block;
background:url("URL IMAGEN 2") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
.tabs a {float:none;}
/* End IE5-Mac hack */
.tabs a:hover {
color:#333;
}
.tabs ul .current {
background-image:url("URL IMAGEN 3");
border-width:0;
}
.tabs ul .current a {
background-image:url("URL IMAGEN 4");
color:#333;
padding-bottom:5px;
}
.js .tabs .current-info,
.js .tabs .accessibletabsanchor{
position:absolute;
left:-999em;
}
.js .tabs .content{
clear:both;
margin:3em 1em 1em 1em;
}
.js .tabs{
width:500px;
}
.tabs{
padding:2em;
}
h4{
display:none;
}

SCRIPT

<script type='text/javascript'>

$(document).ready(function(){
$(&quot;.tabs&quot;).accessibleTabs({
tabhead:&#39;h4&#39;,
fx:&quot;fadeIn&quot;
});
});
</script>

HTML

<div class="tabs">
<h4>PESTAÑA 1</h4><div class="tabbody">AQUI CONTENIDO</div><h4>PESTAÑA 2</h4><div class="tabbody">AQUI CONTENIDO</div><h4>PESTAÑA 3</h4><div class="tabbody">AQUI CONTENIDO</div></div>

DOWNLOAD

En la página de Web Output de Dirk Ginader os podéis bajar el fichero con todo lo necesario

Te recomendamos también

+ Artículos relacionados de Tutorial