|
|
Hola, eso se consigue con CSS + Javascript,
Hay el contenido de cada pestaña en una capa diferente y el boton lo que hace es mostrar y ocultar las capas.
Yo me hice una función muy simple que puedes ver como queda en esta página http://www.ornis.ws/formulario/buscador.php
Te pego los codigos para que los pruebes (Utiliza la libreria jquery, si no la tienes bajatela de jquery.com http://docs.jquery.com/Downloading_jQuery
Copias el archivo jquery-x.x.x junto con tus archivos js (o donde prefieras)
archivo tabs.js:
function changeTab(el)
{
var contentTabs=$(el).parents(".contentTabs");
$(el).blur(); //quita foco de enlace
$(el).parents("ul").children("li").removeClass("actTab");//desactiva tabs
$(el.parentNode).addClass("actTab");
var ee=$("#"+$(el.parentNode).attr("id").replace('tab_',''));
ee.parents("div").children(".itemZoneTab").hide(); //oculta todos los contenidos de los tabs
ee.show();//muestra el contenido del tab seleccionado
}
function closeAllTabs(el)
{
var ee=$(el).parents(".itemZoneTab");
$("#tab_"+ee.attr("id")).removeClass("actTab");
ee.hide()
}
archivo tabs.css:
/* Tabs */
.tabs {background: #fff; float:left; width:100%; display:inline; border-bottom:#ccc 1px solid;}
.tabs ul li{ list-style:none; width:50px;float:left; border:1px solid #ccc; border-bottom:0px; padding:6px 15px; font:11px/11px Arial,Helvetica,sans-serif; margin:1px -1px 0 0; background:#FFFFFF;}
.tabs ul li a, .tabs ul li span{display:block; height:15px; text-decoration:none; }
.tabs ul li span{color:#666666;}
.tabs ul li.actTab {border:1px solid #bcbcbc; border-bottom:0; padding:7px 15px; margin:0 0 -1px 0;background:#F7F9FA; color:#666666;}
.tabs ul li.actTab a{ text-decoration:none; color:#666666;}
/* zona que se muestra */
.zoneTab {padding:10px; border:1px solid #ccc; border-top:0px; margin:0px; background-color:#F7F9FA; }
.itemZoneTab{margin-top:30px; display:block; overflow:hidden;}
archivo index.html:
///////////////////
Si copias todos los archivos en la misma carpeta ya tiene que funcionar (acuerdate de modificar el nombre del archivo del jquery segun la versión que descargues.
Modifica el CSS para ajustarlo a tu sitio
Que lo disfrutes
|