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.

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
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también