Crear tabs o pestañas con jQuery y CSS – Estructurando el contenido de una página web

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

Licencia: Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que mantengas los enlaces que hay dentro del artículo y pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

URL: Crear tabs o pestañas con jQuery y CSS

Se dedica desde hace más de 8 años al diseño web y muy especialmente al front-end. Apasionada de Internet y los proyectos online. Sigue muy de cerca todo lo que se cuece en cuanto a emprendimiento. Ha trabajado como front-end y visual designer para empresas como ELPAIS, Banco Santander y actualmente Tuenti.

13 Respuestas

  1. farile

    esta incompleto, este lugar noayuda solo perjudica ,
    …..creo.

  2. Carlos

    No se amigo, pero he agregado el codico agregando las clases .tabs, .tab_content y .tab_container donde corresponden, he agregado el codigo jquery como un js, tambien agregue, e intente con varias versiones de jquery.min (desdes el cdn y alojado en una carpeta en el servidor) y no me funciona el codigo, el css encaja perfectametne, pero la funcionalidad de las tabs no da ni pa atras y pa delante.

  3. Jasy

    Buenas!

    Anda perfecto, pero ahora necesito cambiar el tab activo cuando se carga la pagina.

    En vez de la primera tab (first) la ultima que en mi caso es la quinta.

    Ya probé reemplazando “First” por “Second” en el js y deja de funcionar.

    Alguna idea?

  4. edgardo

    bueno, me convirtió el código,

    lo que hay que hacer es agregarle al UL inicial: class=”tabs”
    y luego a cada DIV de contenido además del su correspondiente ID, agregar la clase : class=”tab_content”

  5. edgardo

    Hola Verónica, el ejemplo no funciona como está publicado, faltan asignar las clases .tabs y .tab_content . Completo quedaría así:

    Gallery
    Submit

    Gracias lo mismo, quería aportar las correcciones. Saludos.

  6. Miguel

    Me ha servido mucho, gracias

  7. Juan

    se podrá hacer esto en forma vertical? (las pestañas)

  8. ginna

    Disculpe tengo un problema ,e tab se desactiva cuando agrego un menu vertical de jquery, se desactiva y me dice que no se acepta el valor nulo en esta linea —— $(“.tab_content”).hide(); //Hide all content—–, me dice que no acepta valores nulos. nose cual podría ser el problema, espero y agradecere por la ayuda prestada.

  9. Jorge

    Ricardo
    el codigo jQuery debes insertarlo dentro de etiquetas que deberas colocar dentro de las etiquetas head, el script para incluir jQuery tambien va dentro de otras etiquetas que colocarias dentro de las etiquetas head.
    Ahh dentro de la plantilla CSS solo debes colocar los estilos y nada mas

  10. Ricardo

    Hola!! tengo muchas dudas, apenas me estoy iniciando en esto de las paginas web y diseños css, lo primero:
    Inserte el codigo CSS en mi plantilla CSS
    Segundo:
    En donde debo insertar el codigo JQuery, en el header, pero ¿en el header de donde? no entiendo esa parte, se debe insertar en mi plantilla general CSS
    y el script para activar JQuery se inserta en el head, pero en que head ¿en el de mi plantilla general css? o ¿cada vez que haga un articulo en mi blog, debo insertar el codigo?
    Necesito utilizar ese codigo CSS, porfavor ayudenme!!!

  11. dexter

    muy bueno el efecto, vamos a probarlo a ver que tal no s queda..gracias

Deja un comentario

El email no se publica. Todos los campos obligatorios.