Tab Jquery - Panchis

by Michael

HTML

<ul id="tab-menu">
		<li><a href="#">Tab 1</a></li>
		<li><a href="#">Tab 2</a></li>
		<li><a href="#">Tab 3</a></li>
	</ul>

	<div id="tab-content">
		<div class="tab">
			Contenido de Primer Tab
		</div>
		<div class="tab">
			Contenido de Segundo Tab
		</div>
		<div class="tab">
			Contenido de Tercer Tab
		</div>
	</div>

CSS

ul#tab-menu {
		list-style-type: none;
		font-family: Arial;
		font-size: 12px;
		margin: 0;
		padding: 0;
		}
		#tab-menu li {
		background-color: #F0F0F0;
		border-radius: 2px;
		border: 1px solid #E4E4E4;
		box-shadow: 0 5px 0 #DDD;
		color: #eee;
		display: inline-block;
		}
		#tab-menu li a {
		color: #888;
		padding: 10px 20px;
		display: block;
		text-decoration: none;
		}
		#tab-menu li.active {
		background-color: #98D4FF;
		border: 1px solid #58A8D2;
		box-shadow: 0 5px 0 #2785B6;
		color: white;
		}
		div#tab-content {
		margin: 10px 0;
		border: 1px solid #E7E7E7;
		padding: 5px;
		}

JavaScript

$(document).ready(function(){
			//Valores por Defecto
			$("#tab-menu li:first").addClass("active");
			$("#tab-content .tab").hide();
			$("#tab-content .tab:first").show();

			//Cuando haga click en un elemento del menu
			$("#tab-menu li").click(function(){
				//Quitar clases active
				$("#tab-menu li").removeClass('active');
				//Agrego clase active al elemento seleccionado
				$(this).addClass("active");

				//Obtengo indice del elemento seleccionado
				var menuIndice = $(this).index() + 1;
				
				//Oculto los tabs visibles
				$("#tab-content .tab").hide();
				
                //Con un each recorro todos los tabs dentro de tab-content
				$("#tab-content .tab").each(function(){
					//Obtengo el indice del tab actual
					var tab = $(this).index() + 1;

					/* Compruebo que el indice del item del menu seleccionado					
					*  Sea Igual al del tab actual
					*/
					if(tab==menuIndice){	
						//Muestro el tab					
						$(this).show();
					}
				});				
			});
		});