advanced code snippet search

Posted By

skozz on 07/27/11


Tagged

tabs pestaas


Versions (?)

Pestaña para mostrar/ocultar contenidos con jQuery

 / Published in: jQuery
 

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

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

Expand | Embed | Plain Text 
  1. <html>
  2. <head>
  3. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=3.2.1'></script>	
  4. <script>
  5. 		$(document).ready(function(){
  6. 	$(".menu-tabs > li").click(function(e){
  7. 		switch(e.target.id){
  8. 			case "tab1":
  9. 				//cambiamos el estao de la pestaña
  10. 				$("#tab1").addClass("active");
  11. 				$("#tab2").removeClass("active");
  12. 				//y aqui el display para ocultar y mostrar
  13. 				$("div.tab1").css("display", "block");
  14. 				$("div.tab2").css("display", "none");
  15. 			break;
  16. 			case "tab2":
  17. 				//cambiamos el estao de la pestaña
  18. 				$("#tab1").removeClass("active");
  19. 				$("#tab2").addClass("active");
  20. 				//y aqui el display para ocultar y mostrar
  21. 				$("div.tab1").css("display", "none");
  22. 				$("div.tab2").css("display", "block");
  23. 			break;						
  24.  
  25. 		} 	
  26. 		return false;
  27. 	});
  28. });	
  29. </script>
  30.  
  31. <style>
  32. .clear{
  33. 	clear: both;
  34. 	height: 0;
  35. 	visibility: hidden;
  36. 	display: block;
  37. }
  38.  
  39.  
  40. #container{
  41. 	margin: 0px auto;
  42. }
  43. #container ul{ 
  44. 	border-bottom: 1px solid #C1C1C1;
  45. 	display: block;
  46. 	list-style: none outside none;
  47. 	margin-top: 10px;
  48. 	overflow: hidden;
  49. }
  50. #container ul.menu-tabs li{
  51. 	float: left;
  52. 	margin-right: 2px;
  53. 	margin-bottom: -1px;
  54. }
  55. #container ul.menu-tabs li{
  56.     background: none repeat scroll 0 0 #ed8c86;
  57.     color: #FFFFFF;
  58.     cursor: pointer;
  59.     display: block;
  60.     font-size: 12px;
  61.     font-weight: bold;
  62.     margin-bottom: 5px;
  63.     padding: 0 10px;
  64.     position: relative;
  65. }
  66. #container ul.menu-tabs li.active{
  67.     background: none repeat scroll 0 0 #D9180F;
  68.     border-bottom: 0 none;
  69.     color: #FFFFFF;
  70. }	
  71. </style>	
  72.  
  73.  
  74.  
  75. 	</head>
  76.  
  77. 	<body>
  78. 	<div id="container">
  79. 		<ul class="menu-tabs">
  80. 			<li id="tab1" class="active"> Tab1 </li>
  81. 			<li id="tab2">Tab2</li>
  82. 		</ul>
  83. 		<span class="clear"></span>
  84.  
  85.  
  86. 		<div class="content tab1">
  87. 			Nulla dignissim massa nunc. Nulla dignissim massa nunc.
  88. 		</div>
  89.  
  90. 		<div class="content tab2"  style="display:none;">
  91. 			Suspendisse tempor posuere. Suspendisse tempor posuere.
  92. 		</div>
  93.  
  94.  
  95. 	</div>			
  96. 	</body>
  97.  
  98.  
  99. </html>

Report this snippet  

You need to login to post a comment.