Voy a crear un menú con pestañas que nos permita acceder a diferentes contenidos sin refrescar la página. Esto lo vamos a conseguir gracias a jQuery. Al hacer click sobre una pestaña aparece el contenido relacionado eliminando el anterior y marcándose la pestaña seleccionada.
Empezamos primero con un menú sencillo en HTML seguido por todos los contenidos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="contenido_pestanas"> <ul> <li><a href="#opcion1" title="Opción 1">Opción 1 »</a></li> <li><a href="#opcion2" title="Opción 2">Opción 2 »</a></li> <li><a href="#opcion3" title="Opción 3">Opción 3 »</a></li> <li><a href="#opcion4" title="Opción 4">Opción 4 »</a></li> </ul> <div id="opcion1"> <h3>Este es el contenido de la Opción 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="opcion2"> <h3>Este es el contenido de la Opción 2</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id="opcion3"> <h3>Este es el contenido de la Opción 3</h3> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id="opcion4"> <h3>Este es el contenido de la Opción 4</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </div><!-- Fin contenido_pestanas--> |
Como veis he envuelto todo el código en un div que he llamado “contenido_pestanas” y luego cada contenido está dentro de su div correspondiente. El href de cada pestaña del menú es del tipo “#opcionX”, que a efectos de selectores jQuery equivale a un “id=opcionX”, que son los “id” de cada div con contenido. Luego veremos porqué. Dentro de cada div de contenido podemos meter lo que queramos: textos, imágenes, video…
Ahora vamos a darle unos estilos básicos al menú y a los contenidos:
|
1 2 3 4 5 6 7 |
#contenido_pestanas ul { display: block; height: 18px;} #contenido_pestanas a { float: left; padding: 5px 20px; list-style: none; border: 1px solid #999; } #contenido_pestanas a:hover { background-color: #999; color: #FFF;} #contenido_pestanas a.aqui { background-color: #333; color: #FFF; box-shadow: 3px 0px 2px #ccc; -webkit-box-shadow: 3px 0px 2px #ccc; -moz-box-shadow: 3px 0px 2px #ccc;} #contenido_pestanas div { border: 1px solid #333; width: 500px; background: #fff; padding: 20px; box-shadow: 3px 3px 2px #ccc; -webkit-box-shadow: 3px 3px 2px #ccc; -moz-box-shadow: 3px 3px 2px #ccc;} |
Como veis hemos dado sombras a los div que envuelven el contenido y a la pestaña seleccionada (que tendrá la clase “aqui” puesta mediante jQuery), para dar algo de relieve. Por lo demás no hay nada destacable. Recordad que siempre es preferible hacer el padding sobre los enlaces (“a”) que sobre las listas (“li”).
A continuación viene el código que lo mueve todo, gracias a jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ // Script del menú con pestañas $('#contenido_pestanas div').css('position', 'absolute').not(':first').hide(); $('#contenido_pestanas ul li:first a').addClass('aqui'); $('#contenido_pestanas a').click(function(){ $('#contenido_pestanas a').removeClass('aqui'); $(this).addClass('aqui'); $('#contenido_pestanas div').fadeOut(350).filter(this.hash).fadeIn(350); return false; }); }); </script> |
Veis que es muy sencillo. Vamos a ir línea a línea:
- En la línea 3 seleccionamos todos los div con contenido (los que están dentro del div superior “contenido_pestanas”) y los posicionamos todos de manera absoluta uno sobre otro. A continuación eliminamos de la selección al primer div (que es el que se verá al principio) y ocultamos la selección resultante.
- En la línea 4 añadimos la clase “aqui” al primer enlace. Es decir, que la pestaña que va a estar seleccionada al principio es la primera del menú, como es lógico.
- En la línea 5 abrimos la función que va a dar las instrucciones a realizar cuando se haga click sobre uno de los enlaces.
- En la línea 6 quitamos la clase “aqui” a todos los enlaces, para más adelante podérsela poner a la nueva pestaña seleccionada.
-En la línea 7 seleccionamos mediante “this” el enlace sobre el que se ha hecho click. A este le aplicamos la clase “aqui”, ya que es la nueva selección.
- En la linea 8 seleccionamos primero todos los div y los ocultamos mediante “fadeOut”. A continuación, de entre todos los div seleccionamos sólo uno, el que se corresponde al enlace clickeado. ¿Cómo hacemos esto? con “this.hash” seleccionamos el “href” del enlace clickeado desde el “#” incluyendo el mismo (eso es el hash), con lo cual nos quedará “#opcion1″, “#opcion2″, etc… que equivale al id del div de contenido equivalente. A ese div le aplicamos “fadeIn” para mostrarlo.
- En la línea 9 anulamos el comportamiento por defecto de los enlaces.
Bueno, y esto es todo. ¡Espero que os sea útil!
Gracias por tus Posts.
Tengo una duda,
si tengo un post “X”, y quiero dejar en una pestaña el contenido del post y otra los comentarios de dicho post.
se podría usar lo que describiste en este post.
Gracias.
Hola Darío,
Si estás con WordPress pones en una pestaña “the_content” y en otra incluyes los comentarios.
Hola, muy buenos tus aportes te felicito y excelente que halla todavia gente como tu que se preocupa por compartir sus conocimientos con gente que queremos aprender pero seguramente en la mayoria cobran, que dios te bendiga por tus aportes. y gente como tu ojala hubiera muchos cambiaria mucho este mundo un abrazo.
P.D. mi pregunta es tu post ya lo pude hacer pero mi menu lo quiero abajo y el contenido arriba como lo puedo hacer, gracias. Saludos desde mexico, cuando vengas yo te invito a conocer guadalajara es muy linda y muchachas hermosas.:)
Hola Juan, quisiera saber si es posible poner formularios dentro del contenido de cada pestaña, porque lo pruebo y se borra el contenido.
Muchas Gracias por los posts, Saludos!
Vicky
¿Quieres decir que no te sale el formulario? No debería darte problemas. Precisamente he usado un formulario dentro de unas pestañas como las del artículo en este ejemplo de página personalizada de Facebook. La última pestaña tiene un formulario:
Ejemplo de pestaña con iFrames en página de Facebook
Ah, ya veo Juan, entonces voy a volver a intentar, seguramente habría algo mal en el formulario.
Saludos!
hola! me ha servido muchisimo la explicacion, pero tengo una duda, yo queria aplicar el mismo sistema a un sidebar, y no me esta funcionando, no se si es porque estan en divs distintas ? podrias ayudarme para saber como modificar el codigo?
desde ya mil gracias !
Hola Yohanna,
¿Podrías poner el código aquí para ver qué falla?
mira yo lo que quiero si podes darme un codigo ya “echo” asi yo directamente modifico el html la parte del contenido me lo darias porque soy medio aprendiz a ver si me ayudas enviame el codigo a mi email dale adios..
Hola !. ANte todo felicitarte por la web. Hacía tiempor que buscaba recursos interesantes y aqui los h encontrado, y además bien explicados.
He usado tu código par aun menú. El tema es que las capa de abajo se superpone a las opciones y no se porqué. Es decir no queda a ras de la linea de abajo de cada una de las opciones.
Alguien me puede orientar ?
Bueno, después de probar, me he dado cuenta que cuando selecciono una opción del menú la capa si que aparece justo a ras de la opción, pero justo después sube y ya se coloca casi a la mitad de los cuadros de opción 1, 2 ..etc…
hola jose pudistes arreglar tu problema creo q es problema del css a mi me pasa lo mismo si encontrastes la solucion publicala gracias si yo la encuentro igual la publico
Hola, muy interesante post.
Una pregunta o aclaración:
En el css tenemos:
¿el atributo list-style no debería ir en ‘#contenido_pestanas ul’?
Un saludo y gracias
Hola Juan, muchas gracias por el post.. te cuento mi caso, aunque ya estarás aburrido de tanta preguntita, a ver si me puedes echar un cable… muchas gracias de antemano…
Quería integrar este menú en un post o entrada de wordpress, pero no se que estoy haciendo mal porque no consigo que funcione. No se si es por WP, por algún conflicto o porque no estoy poniendo el código en el sitio adecuado.
En mi post o entrada tengo tu código para las pestañas. Esto:
Por otro lado en el archivo header.php tengo tú código y otro que he encontrado por ahí que, supuestamente, hay que colocar para cargar correctamente el jquery. Esto:
Y en la hoja de estilos, tengo tus estilos también (no te los copio porque igual no es necesario).
Sabes que puedo estar haciendo mal? Al cargar la página me muestra todos los divs uno debajo de otro, y si pincho en las pestañas unicamente me lleva al contenido que tiene el ancla, como normalmente pasa en HTML.
Estoy usando un WP multisitio, por si es información importante. Lo tengo alojado en local por lo que no te puedo dar ninguna URL para verlo online, lo siento.
Mucahs gracias por tu tiempo y ayuda!
Un saludo
Nada, no consigo que la parte HTML salga con etiquetas. Espero que no sea muy lioso…
En la 5ª linea del js, también lo he intentado con este código
Pero tampoco me funciona
Hola,
Faltan los div en el código HTML no? Has mirado si te da algún error de Javascript? Con Chrome o Firefox puedes verlo.
Hola, muchas gracias! Qué rapidez!
Los divs los tengo puestos, pero, al poner el comentario, no los ha puesto (que etiquetas usas para poner código en los comentarios?)
No me sale ningún error de JS, o igual no se donde mirar… pero el típico warning que suele salir en la barra inferior no aparece… (uso chrome)
Estoy poniendo cada parte de código en el sitio adecuado??
Mil gracias de nuevo, Juan!
Hola,
La función es mejor que la pongas en functions.php y el Javascript al final de la página.
Perdona, que soy poco ducho con esto todavía…
Esto en functions.php
Y esto en la página, pero cuando dices página te refieres al post? en el mismo WYSIWYG
No me funciona… en principio está todo bien? Puede ser que haya problemas con el simbolo $? He leido que a veces da conflictos… El jquery lo está cargando bien, no? sabes cómo lo puedo saber? y lo del error JS en el browser, como puedo averiguarlo, porque te he dicho que no, e igual es que sí por falta de conocimiento….
Muchísimas gracias por todo, de verdad que me estás ayudando mucho. Siento darte el coñazo de esta forma!
Un saludo!
Hola Carlos,
No, me refiero en el archivo footer.php, antes de la etiqueta body. Puedes poner:
El código HTML lo tienes bien puesto?
Hola Juan, ya lo he resuelto y creo que es justo publicar aquí como ha quedado todo por si a alguien le puede servir de ayuda. No se como hacer para que salgan las cajas de texto que pones tú en los comentarios para mostrar el código correctamente, así que espero que no quede muy lioso.
La solución a mi problema la he resuelto de la siguiente forma…Lo publico aquí por si a alguien le puede ayudar en el futuro. Gracias Juan, por la ayuda y el tiempo que te he robado!!
Veamos..
Por un lado tengo el HTML, con el contenido, añadido en el post. Así
Por otro lado cargo el jquery. Lo hago desde la página functions.php. No es necesario poner la etiqueta . Lo tengo así:
Y por último la función necesaria para mostrar y ocultar el contenido de las pestañas. Esto lo tengo puesto en la página footer.php, justo antes de la etiqueta . Aquí sí es necesario poner la etiqueta . Lo tengo así puesto:
Y con esto todo funciona perfectamente. No se si hay alguna forma mejor de hacerlo, pero a mi me funciona así. Creo que el problema lo estaba teniendo a la hora de ubicar los códigos en los sitios adecuados, sobre todo el que carga el jquery. Muchas gracias a Juan por su ayuda! Espero que esto le sirva a alguien en el futuro!
Un saludo a todos!
yo creo que sería de mucho apoyo, mencionar que bloque van antes de o antes de o en alguna otra parte,,, saludos ..!
/head o /body o en algún otra parte.
Nada vengo preguntar y por desgracia tampoco tengo algo que aportar, solo quería agradecer. Llevo una semana tratando de hacer el menú con tabs y no había podido gracias a ti entendí todo a la perfección. Muchas Gracias!!
Gracias ))
man podrias hacerlo todo en un html como una web y mandarmelo para descargarlo?? por favorr y muy buen aporte man
Hola Juan un amigo me acaba de hablar sobre las bondades de JQuery y lo quise probar y lo bueno es que de lo primero que veo es tu post muy bueno.
MI problema es que no se adonde debo colocar cada codigo, pues entiendo que no es en una sola pagina.
Te menciono que estoy trabajando con Visual Studio 2010 y el codigo del principio donde colocas el contenido pestañas HTML lo pongo claro en una pagina HTML pero lo demas: el Script y los estilos no se donde colocarlos. Por favor si me ayudas te lo agradeceré muchisimo!
Hola Alejandro,
Lo recomendable es poner los estilos en una hoja de estilos (CSS) y los scripts en el pie de página antes de la etiqueta “body”.
Ante Nada Felicitar al autor de este Tutorial solo quería comentar q si no les sale es codigo es pq en el css deben de agregarle el siguiente valor
eso es todo Gracias
Buenas tardes. Estoy desarrollando un sistema y utilice el menu que usted ha compartido. La utilización que le estoy dando es para captuar información y en cada pestaña (6 en total) se desea capturar diferente tipo de datos y quiero utilizar un programa php que me genere el formulario para cada pestaña. Mi pregunta es: ¿Que debo hacer para que al dar click en cada una de las pestañas ejecute un programa php y el formulario que se va a generar lo coloque en el área correspondiente dentro del menú???
En el correo anterior olvidé darle las gracias.
Saludos
Hola… en primer lugar agradecer y felicitar al autor, por compartir sus conocimientos con los que todavía no sabemos mucho del tema… la verdad es que soy un novato completo en este tema, hice paso a paso lo que dice el codigo, pero note que son fracciones de un codigo mas grande. No estoy obteniendo los resultados que muestra el ejemplo, por lo tanto me pregunto si pueden subir el codigo completo, de todos los archivos, .html .php .js .css o lo que se necesite, por favor, este ejemplo es justo lo que necesito pero no he podido implementarlo… muchas gracias de antemano.
Saludos.