Publicidad

JQuery. Como crear las tabs más fáciles

Autor: | Categoría:

Siempre que quieres hacer alguna cosa en tu página más allá de html y css, buscas manera de hacer lo que tu quieres y encuentras cosas hechas por programadores para programadores, yo soy diseñador y me las tengo que apañar para hacer mis diseños sin programador, así que aquí te voy a mostrar como hacer una tab fácilmente, explicándote paso a paso que hago para que lo entiendas.

Primer paso: Componer el html

Deberás crear un menú para poder controlar los elementos a mostrar en tu tab.

Deberás también crear el contenido de la tab, así que si has creado 3 pestañas en tu menú, crearás también 3 contenidos distintos.

Ahora crearemos los estilos para que tengan forma de tab.

Segundo paso: La programación

Bien, para realizar estas tabs utilizamos JQuery, por lo tanto, o bien tienes en la misma carpeta un archivo .js con la librería o bien enlazas directamente con alguna página que tenga en su servidor tal archivo, en mi caso he llamado a esa página dentro de http://jquery.com

Pues ya nos podemos poner manos a la obra con el código.

<script type="text/javascript" language="javascript">// <![CDATA[
$(function (activar_pestanya) {
	// llamamos a la función y la nombramos
		var tabContainerssup = $('div.contenedor > div');
		// Convertimos una ruta en una variable, así la llamada a esa ruta será más fácil
 
    		$('div.tab a').click(function () {
		// ahora le estamos diciendo que active la siguiente 
		// función cada vez que clickamos dentro de los a situados dentro del div tab
 
		tabContainerssup.hide().filter(this.hash).show();
		// con la variable que hemos creado antes, le decimos que oculte todo su contenido, y que sólo muestre el contenido del anchor que hemos clickado
 
	        	return false;
		// ponemos esta linia para que no se nos desplace al hacer click arriba de la página
 
		}).filter(':first').click();
		// esta sentencia indica que lo primero que mostrará sera el primer anchor de la lista, si pusiéramos :last en vez de :first mostraría el último en un principio
	});
// ]]></script>

Truquito: Cambia el efecto

Si no quieres que sólo aparezcan o desaparezcan los diferentes contenidos de tus tabs, puedes cambiar el hide() y el show() por fadeOut y fadeIn por ejemplo. ¡Trabájalo un poco y hazlo a tu gusto!

Fácil, ¿no?

Publicidad
Etiquetas: , , , ,
  • Marcomaq21

    Hola tengo una pregunta quiero hacer algo como lo que esta en esta pagian 
    http://www.laboratoriosmedicos.hn/servicios/  quiero saber como lo hago usando lo anterior. 

    • dahir

      no tienes q usar jquery para eso: es solo una lista tipo viñetas (bullets) con links adentro.

      Para los efectos tienes q usar CSS (class=”link1″, class=”link2″ etc)

    • http://www.dashaft.net/ dashaft

      Se trataría de poner todas las páginas en el mismo html y hacer como comento en el tutorial, separando cada parte con su div y su id, no es complicado :)

      Saludos!

    • http://www.dashaft.net/ dashaft

      Se trataría de poner todas las páginas en el mismo html y hacer como comento en el tutorial, separando cada parte con su div y su id, no es complicado :)

      Saludos!

  • nicolas

    como le cambio el color a los tabs? o si o si tienen que ser blancos

    • http://www.dashaft.net/ dashaft

      No @nicolas pueden ser del color que tu quieras, en el css le puedes poner el color que más te guste: .tab a{ background-color: #elquequieras };

      Gracias por el comentario!

    • http://www.dashaft.net/ dashaft

      No @nicolas pueden ser del color que tu quieras, en el css le puedes poner el color que más te guste: .tab a{ background-color: #elquequieras };

      Gracias por el comentario!

  • juando.dlp

    Hola me pareció excelente tu tutorial. muchas gracias por poner esta info que es de mucha ayuda para los que apenas empezamos a moverle a lo del web. tengo un problema y te agradecería mucho si pudieras darme alguna pista de ¿como puedo meter estas tabs que creaste en el tutorial a una pagina echa en wordpress? saludos. y gracias

    • http://www.dashaft.net/ dashaft

      juando.dlp gracias!!!
      Para meter esto en WordPress es bien fácil, se trata de entrar en el theme de tu wordpress y añadirle en la página que necesites una tab el código, si quieres, contáctame por email para tu caso más concreto y te puedo ayudar mejor!
      Saludos y de nuevo, gracias!

  • juando.dlp

    Hola muchas gracias logre hacerlo yo solo. solo que ahora te molesto con otra duda. ¿sabes como puedo cambiar el color al enlace activo? osea quiero que cambie el color de el enlace de la tab que estoy viendo en ese momento.
    muchas gracias y saludos.

    • http://www.dashaft.net/ dashaft

      Tanquilo no molestas 😉
      Pues es tan sencillo como añadir lo siguiente:
      this.addClass(‘active’); dentro de la función antes del return false, y agregando la clase .active al css con el color que quieras.

      Para que esta clase desaparezca al hacer cada click tendrías que añadir un this.removeClass(‘active’); al principio de la funcion para que se borrara dicha clase del link activo

      Saludos y para lo que necesites aquí estoy 😉

      • Osvaldo

        Amigo un excelente tuto pero yo tambien trato de hacer lo mismo (cambiar de color los tab y no me sale como dices )podrías poner todo el código, y perdón por mi ignorancia pero soy muy nuevo en jquery, y es la primera vez que trabajo con el, de antemano agradezco tu atención.

        • http://www.dashaft.net/ dashaft

          Osvaldo, un placer en poderte ayudar! Mira, te pongo el código aquí entero para que lo entiendas mejor:

          $(function (activar_pestanya) {
          var tabContainerssup = $(‘div.contenedor > div’);
          $(‘div.tab a’).click(function () {
          tabContainerssup.hide().filter(this.hash).show();

          return false;

          }).filter(‘:first’).click();

          });

          • Osvaldo

            Muchas Gracias!!!!!!!!!!!!!!!!!!

          • Osvaldo

            ya me salio muchas gracias

          • http://www.dashaft.net/ dashaft

            jjajjaa A mandar Olvaldo 😉 un saludo!

          • Osvaldo

            una ultima cosa ya me salio pero no logro quitar el efecto despues del click , donde coloco $(this).removeClass(‘active’); esto si no es mucha molestia y te agradezco toda tu ayuda

  • Cesar Amezcua

    Hola como puedo hacer que si cargo la pagina con un hashtag me cargue directamente ese hashtag, es decir mipagina.com/#pestana3. Gracias

    • http://www.dashaft.net/ dashaft

      ¡Hola Cesar! Para conseguir lo que tu necesitas, deberías hacer dos cosas:
      1º Añadir dentro del click esta linea –> tabContainerssup.hide().filter(‘#tpestana3′).show();
      2º Eliminar esto –> .filter(‘:first’).click() (que es lo que le indica al script que empieze por el primero)

      Una tontería verdad 😉

      Saludos y gracias por comentar!

      • Cesar Amezcua

        Ok solo que lo de pestaña 3 era un ejemplo porque varia puede que mande a la 2 o a la 1, no e fija la 3, mucha gracias por responder

        Aqui esta en concreto lo que quiero

        http://hogaresunion.lxr.mx/estado/hidalgo/ ahi te muestra 3 links diferentes

        no se si me explique

        • http://www.dashaft.net/ dashaft

          Ahora te entendí! mea culpa!
          En este foro explica perfectamente como hacerlo –> http://forum.jquery.com/topic/how-to-open-a-specific-tab-via-an-external-link
          Espero que te sirva de ayuda!

          Saludos!

          • Cesar Amezcua

            si muchas gracias lo checo

          • Cesar Amezcua

            Ya cheque el foro pero eso solo funcionado jquery ui y no explica muy claramente, mas o menos entendi la idea previa que me pusiste y lo resolvi con una variable y funciono a excepcion de .filter(‘:first’).click(); que se queda seleccionada la primera, ¿como hago para que se seleccione la que ya escogi?, este es mi codigo

            $(function (activar_pestanya) {

            var tabContainerssup = $(‘div.contenidodetabs > div’);

            var hash = window.location.hash

            $(‘div.tabs a’).click(function () {

            tabContainerssup.hide().filter(hash).show();

            $(this).addClass(‘active’).siblings().removeClass(‘active’);

            return false;

            }).filter(‘:selected’).click();

            });

            Gracias

  • Josue

    hola que tal muy buen ejemplo, como seria para que me cargue formularios en .asp en lugar de solo texto como aparece en tu ejemplo….

    • http://www.dashaft.net/ dashaft

      Hola Josue! Bien facil, en la pestaña que necesites el formulario, metes la etiqueta form y allí cargará, no tiene pérdida!
      Gracias por le comentario!

  • aaaa

    b ng bcv b

¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Publicidad

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies