Crear un menú con pestañas con jQuery

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.

Ver Demo

Empezamos primero con un menú sencillo en HTML seguido por todos los contenidos:

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:

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:

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!

40 comentarios en “Crear un menú con pestañas con jQuery

  1. 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.

      1. 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.:)

    1. Muy buenos días Juan, agradeciendo tus aportaciones que son muy buenas, es mi deseo decirte que en el módulo css has omitido el siguiente módulo para que el menú quede alineado correctamente.
      #contenido_pestanas ul{
      display: block;
      height: 18px;
      }
      —————————- Te faltaba ——
      #contenido_pestanas li {
      display: inline;
      list-style: none;
      }
      ——————————————————-

      Un cordial saludo José Enrique

      #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;
      }

  2. 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 !

  3. 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..

  4. 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 ?

  5. 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…

    1. 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

  6. 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

  7. 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

    1. 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 🙁

    2. 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.

      1. 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!

      1. 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!

        1. 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?

          1. 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.

  8. 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!

  9. 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!! 🙂

  10. 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!

    1. 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”.

  11. 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

  12. 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ú???

  13. 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.

  14. Juan

    Es que quiero hacer varios formularios los cuales se pueda ingresar por los tabs pero cuando intento ingresar mas

    se me desborda el formulario del tab quisiera saber si solo sirven a para colocar texto o si se podria realizar los formularios.

     

    Quedo atento gracias

  15. Hola!!

    He utilizado el codigo para meter formularios en los div, el problema es que al enviar los datos y recargar la página vuelve a la pestaña 1. Cómo podría hacer que después de enviar los datos del formulario se mantuviera en la misma pestaña que me encontraba.

    Gracias

  16. Buenas tardes, tengo una pregunta, ya tengo un menú elaborado a base de pestañas, pero quiero tener otro inmerso dentro de una pestaña es decir como 28 pestañas dentro de una pestaña, pero no logro que aparezcan estas, solo aparece como si fuera una lista plana , existe alguna manera de hacer esto? .

    Saludos y gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.