Sidetab Box con rotacion JQuery

En CSSnewbie nos enseñan como crear una sidetab cuyo contenido va rotando usando la librería JQuery y un plugin de la misma llamado equalHeights (Descarga plugin).

CSS

.tabbed-box {
width: 302px;
background: #fff url(URL ALOJAMIENTO IMAGEN BODY) repeat-x bottom;
border: 1px solid #ddd; }
.tabbed-box .tabs li {
list-style: none;
float: left; }
.tabbed-box .tabs li a {
display: block;
width: 100px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #888;
background: #fff url(URL ALOJAMIENTO IMAGEN PESTAÑAS) repeat-x bottom;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
border-left: none; }
.tabbed-box .tabs li a:hover {
color: #333; }
.tabbed-box .tabs li a:focus {
outline: none; }
.tabbed-box .tabs li a.active, .tabbed-box .tabs li a.active:hover {
background: #fff;
color: #333;
border-bottom: 1px solid #fff; }
.tabbed-content {
padding: 3em 1em 1em 1em;
display : none; }

Script

<script src='URL ALOJAMIENTO/jquery.equalheights.js' type='text/javascript'/>
<script>
var rotateSpeed = 5000; // Milliseconds to wait until switching tabs.
var currentTab = 0; // Set to a different number to start on a different tab.
var numTabs; // These two variables are set on document ready.
var autoRotate;

function openTab(clickedTab) {
var thisTab = $(&quot;.tabbed-box .tabs a&quot;).index(clickedTab);
$(&quot;.tabbed-box .tabs li a&quot;).removeClass(&quot;active&quot;);
$(&quot;.tabbed-box .tabs li a:eq(&quot;+thisTab+&quot;)&quot;).addClass(&quot;active&quot;);
$(&quot;.tabbed-box .tabbed-content&quot;).hide();
$(&quot;.tabbed-box .tabbed-content:eq(&quot;+thisTab+&quot;)&quot;).show();
currentTab = thisTab;
}

function rotateTabs() {
var nextTab = (currentTab == (numTabs - 1)) ? 0 : currentTab + 1;
openTab($(&quot;.tabbed-box .tabs li a:eq(&quot;+nextTab+&quot;)&quot;));
}

$(document).ready(function() {
$(&quot;.tabbed-content&quot;).equalHeights();
numTabs = $(&quot;.tabbed-box .tabs li a&quot;).length;

$(&quot;.tabbed-box .tabs li a&quot;).click(function() {
openTab($(this)); return false;
});

autoRotate = setInterval(&quot;rotateTabs()&quot;, rotateSpeed);
$(&quot;.tabbed-box .tabs li a:eq(&quot;+currentTab+&quot;)&quot;).click()
});
</script>

HTML

<div class="tabbed-box">
<ul class="tabs">
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 2</a></li>
</ul>
<div class="tabbed-content">
<p>Contenido pestaña 1</p>
<p>Contenido pestaña 1</p>
<p>Contenido pestaña 1</p>
</div>
<div class="tabbed-content">
<p>Contenido pestaña tab 2</p>
<p>Contenido pestaña tab 2</p>
<p>Contenido pestaña tab 2</p>
<p>Contenido pestaña tab 2</p>
</div>
<div class="tabbed-content">
<p>Contenido pestaña 3</p>
<p>Contenido pestaña 3</p>
<p>Contenido pestaña 3</p>
<p>Contenido pestaña 3</p>
<p>Contenido pestaña 3</p>
</div>
</div>

►DEMO

Autor: Carlos Pizcos . 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

+ Diseño-web