Posted By

skozz on 07/27/11

Tagged

Versions (?)

Last Edited at 07/27/11 05:59pm

Statistics

Viewed 600 times

Favorited by 0 user(s)

Related snippets

PestaÃ±a para mostrar/ocultar contenidos con jQuery

/ Published in: jQuery

El script funciona copiando y pegando, y se puede ver como funciona. BÃ¡sicamente lo que hace es aÃ±adir y quitar una clase CSS cambiando el display para mostrar u ocultar el contenido segÃºn el caso.

Nota: actualizar la librerÃa jquery a la mÃ¡s actual.

Nota 2: No maquetÃ© mucho mÃ¡s las pestaÃ±as para que cada quien le de su estilo, para que se entienda mejor el funcionamiento con menos lÃneas.

Nota 3: Como consejo para los mÃ¡s avanzados, yo crearÃa (de hecho, asÃ lo hice) un bucle para los cases en la funciÃ³n, de modo que no se repita tanto. Para los de wordpress recomendarÃa hacerle un loop dependiente del tipo de contenido.

http://www.angelrmolina.com

Highlighted TextExpand

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=3.2.1'></script>	
<script>
		$(document).ready(function(){
	$(".menu-tabs > li").click(function(e){
		switch(e.target.id){
			case "tab1":
				//cambiamos el estao de la pestaÃƒÂ±a
				$("#tab1").addClass("active");
				$("#tab2").removeClass("active");
				//y aqui el display para ocultar y mostrar
				$("div.tab1").css("display", "block");
				$("div.tab2").css("display", "none");
			break;
			case "tab2":
				//cambiamos el estao de la pestaÃƒÂ±a
				$("#tab1").removeClass("active");
				$("#tab2").addClass("active");
				//y aqui el display para ocultar y mostrar
				$("div.tab1").css("display", "none");
				$("div.tab2").css("display", "block");
			break;						
					
		} 	
		return false;
	});
});	
</script>
	
<style>
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

#container{
	margin: 0px auto;
}
#container ul{ 
	border-bottom: 1px solid #C1C1C1;
	display: block;
	list-style: none outside none;
	margin-top: 10px;
	overflow: hidden;
}
#container ul.menu-tabs li{
	float: left;
	margin-right: 2px;
	margin-bottom: -1px;
}
#container ul.menu-tabs li{
    background: none repeat scroll 0 0 #ed8c86;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 0 10px;
    position: relative;
}
#container ul.menu-tabs li.active{
    background: none repeat scroll 0 0 #D9180F;
    border-bottom: 0 none;
    color: #FFFFFF;
}	
</style>	
	
	
	
	</head>
	
	<body>
	<div id="container">
		<ul class="menu-tabs">
			<li id="tab1" class="active"> Tab1 </li>
			<li id="tab2">Tab2</li>
		</ul>
		<span class="clear"></span>
	
	
		<div class="content tab1">
			Nulla dignissim massa nunc. Nulla dignissim massa nunc.
		</div>
		
		<div class="content tab2"  style="display:none;">
			Suspendisse tempor posuere. Suspendisse tempor posuere.
		</div>

</div>			
	</body>
	
	
</html>

URL: http://www.angelrmolina.com/demos/tabs-jquery-full-demo.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.