Revision: 49656
Updated Code
at July 27, 2011 18:04 by skozz
Updated Code
<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>
Revision: 49655
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at July 27, 2011 17:59 by skozz
Initial Code
<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>
Initial URL
http://www.angelrmolina.com/demos/tabs-jquery-full-demo.html
Initial Description
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
Initial Title
Pestaña para mostrar/ocultar contenidos con jQuery
Initial Tags
Initial Language
jQuery