jQuery tabs con animación, sombras y esquinas redondeadas

En la próxima actualización de mi plugin para WordPress Youtube Channel Gallery voy a organizar las diferentes partes del plugin mediante pestañas. Aunque en un principio pensé en usar las Tabs de jQuery UI vi que si otro plugin usaba ese mismo widget machacaría los estilos de mi plugin y que además no necesitaba algo tan complejo. Hay muchos ejemplos de cómo crear un sistemas de pestañas usando sólo jQuery y de forma sencilla pero quería algo que tuviera más detalle, como animación entre pestañas, sombras y esquinas redondeadas.

Acceder a demo

Descargar

El JavaScript quedaría de la siguiente forma:

jQuery(document).ready(function($) {

	$('#tabs .tabscontent>div').not('div:first').hide();
	$('#tabs ul li:first,#tabs .tabscontent>div:first').addClass('active');

	$('#tabs ul li a').click(function(){

		var currentTab = $(this).parent();
		if(!currentTab.hasClass('active')){
			$('#tabs ul li').removeClass('active');				

			$('#tabs .tabscontent>div').slideUp('fast').removeClass('active');

			var currentcontent = $($(this).attr('href'));
			currentcontent.slideDown('fast', function() {
				currentTab.addClass('active');
				currentcontent.addClass('active');
			});
		}
		return false;							
	});
});

jQuery(document).ready(function($) {

$('#tabs .tabscontent>div').not('div:first').hide();

$('#tabs ul li:first,#tabs .tabscontent>div:first').addClass('active');

$('#tabs ul li a').click(function(){

var currentTab = $(this).parent();

if(!currentTab.hasClass('active')){

$('#tabs ul li').removeClass('active');

$('#tabs .tabscontent>div').slideUp('fast').removeClass('active');

var currentcontent = $($(this).attr('href'));

currentcontent.slideDown('fast', function() {

currentTab.addClass('active');

currentcontent.addClass('active');

});

}

return false;

});

El CSS quedaría de la siguiente forma:

	* { box-sizing: border-box;}
	body{font-size:11px;font-family:Verdana, Geneva, sans-serif;}
	a{ color: #000;	text-decoration: none;}
	.content *:first-child {margin-top: 0;}
	.content *:last-child {margin-bottom: 0;}

	/*clearfix*/
	.clearfix:before, .clearfix:after { display: table; content: ""; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }

	/*tabs ul*/
	.tabs ul{
		margin: 0;padding: 0;
	}

	/*tabs li*/
	.tabs li { 
		position: relative; 
		display: inline-block; 
		margin: 1px .2em 0 0; 
		padding: 0;
		list-style: none; white-space: nowrap;
	}

	.tabs li.active a{
		position: relative;
		z-index: 10;
		margin-bottom: -1px;
		padding-bottom: 6px;
		background: #FAFAFA;
		box-shadow: 0 0 8px rgba(0, 0, 0, .2);
	}

	/*tabs a*/
	.tabs a{
		display: inline-block;
		margin-bottom: -5px;
		padding: 5px;
		padding-bottom: 10px;
		border: 1px solid #DFDFDF;
		border-bottom: none;
		border-radius: 5px 5px 0 0;
		background: #F3F3F3;
	}

	/*content*/
	.tabs .tabscontent {
		position: relative;
		display: block;
		float: left; 
		border: 1px solid #DFDFDF;
		border-radius: 5px;
		background: #F3F3F3;
		box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	}
	.tabs .tabscontent .active{
		position: relative;
		z-index: 200;
		display: inline-block;
		border-radius: 5px;
		background: #FAFAFA;
	}

	/*first tab with border-radius 0*/
	.tabs .tabscontent:first-child,
	.tabs .tabscontent .active:first-child {
		border-top-left-radius: 0;
	}

	.tabs .content{
		padding: 20px;
	}

* { box-sizing: border-box;}

body{font-size:11px;font-family:Verdana, Geneva, sans-serif;}

a{ color: #000; text-decoration: none;}

.content *:first-child {margin-top: 0;}

.content *:last-child {margin-bottom: 0;}

/*clearfix*/

.clearfix:before, .clearfix:after { display: table; content: ""; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/*tabs ul*/

.tabs ul{

margin: 0;padding: 0;

}

/*tabs li*/

.tabs li {

position: relative;

display: inline-block;

margin: 1px .2em 0 0;

padding: 0;

list-style: none; white-space: nowrap;

}

.tabs li.active a{

position: relative;

z-index: 10;

margin-bottom: -1px;

padding-bottom: 6px;

background: #FAFAFA;

box-shadow: 0 0 8px rgba(0, 0, 0, .2);

}

/*tabs a*/

.tabs a{

display: inline-block;

margin-bottom: -5px;

padding: 5px;

padding-bottom: 10px;

border: 1px solid #DFDFDF;

border-bottom: none;

border-radius: 5px 5px 0 0;

background: #F3F3F3;

}

/*content*/

.tabs .tabscontent {

position: relative;

display: block;

float: left;

border: 1px solid #DFDFDF;

border-radius: 5px;

background: #F3F3F3;

box-shadow: 0 0 10px rgba(0, 0, 0, .2);

}

.tabs .tabscontent .active{

position: relative;

z-index: 200;

display: inline-block;

border-radius: 5px;

background: #FAFAFA;

}

/*first tab with border-radius 0*/

.tabs .tabscontent:first-child,

.tabs .tabscontent .active:first-child {

border-top-left-radius: 0;

}

.tabs .content{

padding: 20px;

}

Y finalmente, el HTML tendría el siguiente aspecto:

	<div id="tabs" class="tabs">
		<ul>
			<li><a href="#tab-1">Tab One</a></li>
			<li><a href="#tab-2">Tab Two</a></li>
			<li><a href="#tab-3">Tab Three</a></li>
		</ul>
		<div class="tabscontent">
			<div id="tab-1">
				<div class="content">
					<h3>Tab One</h3>
				</div>
			</div>
			<div id="tab-2">
				<div class="content">
					<h3>Tab Two</h3>
				</div>
			</div>
			<div id="tab-3">
				<div class="content">
					<h3>Tab Three</h3>
				</div>
			</div>
		</div>
	</div>