Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Cómo crear un área de contenido con pestañas usando CSS y jQuery

by
Read Time:23 minsLanguages:

Spanish (Español) translation by Nadia Gonzales (you can also view the original English article)

Uno de los mayores retos para los diseñadores web es encontrar la manera de colocar mucha información en una página sin perder la usabilidad. El contenido con pestañas es una gran manera de manejar este problema y ha sido ampliamente utilizado en los blogs recientemente. Hoy vamos a construir una pequeña y sencilla caja de información con pestañas en HTML, luego la haremos funcionar usando algo de Javascript simple, y finalmente lograremos lo mismo usando la biblioteca jQuery.


Paso 1

Primero lo primero, necesitamos algo que se vea impresionante. Así que iremos rápidamente a Photoshop y obtendremos una bonita maqueta con el aspecto que debería tener nuestro componente con pestañas. Es bastante sencillo, con unos pocos degradados adicionales quedará increíble. Puedes descargar el archivo PSD de Photoshop de esta imagen si quieres echarle un vistazo más de cerca, pero es bastante simple y podemos trabajar a partir de JPG plano.


Paso 2

Lo primero que hay que hacer a la hora de construir, por supuesto, es plantearse una idea aproximada de cómo se llevará a cabo el trabajo. Esto es más fácil cuanto más cosas hayas desarrollado. Viendo esta imagen yo diría que lo mejor es:

  1. Tener un contenedor < div > en el que colocaremos todo dentro. De esta manera, si necesitáramos posicionar nuestro cuadro o colocarlo en una barra lateral, podemos simplemente tomar todo lo que se encuentra en el y copiarlo+pegarlo en algún lugar.
  2. Luego tendremos el área de encabezado, probablemente con una etiqueta < h >.
  3. A continuación, tendremos una segunda etiqueta < div > que contendrá las pestañas y el contenido. Este es el cuadro gris oscuro de la imagen.
  4. Luego dentro de ella usaremos una lista desordenada < ul > donde cada elemento es un enlace para las pestañas. Esto nos permitirá utilizar las partes de < li > de la lista para posicionar las pestañas y las partes de < a > para darles estilo y darles estados de activación y desactivación.
  5. A continuación, crearemos un área final < div > que tenga el contenido de cada pestaña. Necesitaremos uno de estos para cada pestaña, y los mostraremos u ocultaremos dependiendo de la pestaña en la que se haya hecho clic.

Así que para resumir, será algo así:

No te preocupes si al ver la imagen no te viene a la cabeza inmediatamente esa estructura. A veces hay que hacer las cosas por ensayo y error. En mi caso he hecho estas cositas con pestañas unas cuantas veces y sé que esta es una forma sencilla de hacerlas.

También es bueno pensar en la estructura de esta manera antes de tener un montón de nombres de clase, identificadores y el contenido porque puede ser complicado identificar cualquier cosa más adelante. Especialmente cuando se añade el contenido de todas las diferentes pestañas.

Así que ahora que tenemos una imagen en mente de cómo construir nuestra estructura, ¡vamos a ello!


Paso 3

Ahora bien, si has seguido mis tutoriales en PSDTUTS sabrás que me encanta un buen fondo degradado. Así que antes de empezar con la estructura de pestañas, ¡consigamos un buen fondo!

Abre Photoshop, crea un documento de 1000px x 1000px y dibuja un agradable (sutil) degradado radial como el que se muestra a continuación. Fíjate en que he dibujado desde el centro/superior y me he asegurado de que el degradado esté terminado cuando llegue al borde del documento. Eso significa que puedo establecer el color de fondo en HTML para que sea el color más oscuro y si alguien estira su ventana del navegador será infinito.


Paso 4

Crea un nuevo directorio para el proyecto, luego crea un segundo directorio dentro de él llamado images y guarda la imagen dentro como background.jpg. Cuando guardes la imagen utiliza Archivo > Guardar para Web y dispositivos y selecciona JPG con un ajuste de calidad de aproximadamente 70. El tamaño del archivo es de 16kb, lo que no está mal. Hubo un tiempo en el que realmente había que escatimar y ahorrar, pero ahora solo hay que asegurarse de no ser estúpidamente derrochador con el tamaño de los archivos.

Ahora creamos un documento HTML y escribimos algo de código:

Así que esa será la base de nuestro HTML. Ahora crearemos el documento style.css y escribiremos lo siguiente:

Un par de cosas a tener en cuenta aquí:

  1. ¡Es posible escribir este mismo CSS utilizando abreviaturas y reducir el número de líneas utilizadas, pero es mucho más claro de esta manera y mejor a fines de escribir el tutorial!
  2. Tenemos una imagen de fondo (el degradado) y la hemos configurado para que no se repita, porque solo queremos que aparezca una vez, está centrada y finalmente el color de fondo (#657077) es el más oscuro.
  3. Añadí un margen de 40px. Esto es solo para posicionar mis cosas más tarde de modo que todo luzca bien.

Puedes ver el documento HTML resultante aquí. Fíjate en que si cambias el tamaño de la ventana se ve un bonito fondo degradado infinito. ¡Maravilloso!


Paso 5

A continuación añadimos nuestra estructura a la página para poder empezar a darle estilo.

Así que, como puedes ver, he utilizado básicamente la misma estructura que mencioné en el paso 2. He añadido algunos identificadores, clases y algo de contenido real. Este es el razonamiento detrás de lo que he hecho:

  1. Para el encabezado, he colocado el subtexto "Selecciona una pestaña" en un elemento < small >. Esto me permite utilizar el elemento < h4 > para el posicionamiento general y el elemento < small > para reestructurar y posicionar el subtexto.
  2. El contenedor < div > tiene un id="tabbed_box_1" y un class="tabbed_box". Hice esto porque podríamos reutilizar este código varias veces en la misma página. Si hacemos eso podríamos usar los identificadores para posicionar cada uno en diferentes lugares. Pero todavía tendríamos la clase para hacer el estilo. Mientras que si usáramos el identificador para el estilo, terminaríamos teniendo que definir los mismos estilos una y otra vez para diferentes identificadores.
  3. Le he dado a los enlaces y a las áreas de contenido identificadores porque necesitamos usar Javascript para manipularlos más tarde.
  4. Por último, le di al elemento < ul > un nombre de clase. En realidad podríamos estilizarlo sin una clase simplemente estilizando .tabbed_area ul { } pero esto podría resultar confuso con los siguientes < ul > que pongamos dentro del área de contenido. Así que es mejor que tenga un nombre de clase para que podamos referirnos a él.

¡OK, sin estilos no luce como nade del otro mundo.... ¡todavía!


Paso 6

Ahora para estilizar los elementos, creo que es mejor trabajar desde el elemento exterior hacia adentro. Así que vamos a empezar con este elemento: < div id="tabbed_box" class="container" >, que vamos a utilizar para posicionar el cuadro muy bien en el centro de nuestro documento utilizando este código:


Paso 7

Ahora haremos el área del encabezado. Podemos estilizar el encabezado así:

Algunas cosas a tener en cuenta aquí:

  1. En lugar de definir solo los estilos para h4, he definido para .tabbed_box h4. Esto es importante en un documento HTML más grande porque podrías tener otro estilo h4 en otro lugar. Así que quieres asegurarte de que no se superponga o cause futuros problemas de superposición.
  2. Notarás que también ajusté el margen inferior de h4 a 10px. Esto es para que el espaciado se vea bien. Es importante saber que muchos elementos tienen valores por defecto. Por ejemplo, un h4 ya tiene un margen inferior, y es más grande de lo que queremos. Así que si no lo configuráramos nosotros, aparecería con un margen mayor. Algunas personas utilizan hojas de estilo especiales que restablecen todos estos valores por defecto, pero yo me he acostumbrado a restablecerlos individualmente cuando lo necesito.
  3. Verás que también he utilizado el atributo text-transform para que el texto pequeño aparezca en mayúsculas. Por supuesto, podríamos haberlo escrito en mayúsculas, pero ¡me gusta hacerlo así!
  4. También notarás que en la definición de la letra pequeña, le di una definición position:relative, esto es para poder ajustar donde aparece, moviéndola 4px hacia arriba y 6px hacia la derecha.
  5. Por último, al estilizar el elemento h4 le di un espaciado de letra negativo, pero eso significa que el elemento pequeño obtiene el mismo espaciado negativo de letra también, lo que no queremos. Así que tengo que definirlo de nuevo como 0px allí. Esto es gracias al hecho de que los estilos van en forma de cascada, de ahí el nombre de Hojas de estilo en cascada. Muchas veces notarás que algo se ve raro en tu página y será porque el elemento ha heredado algún estilo que olvidaste por completo. La primera vez que hice este fragmento de estilo, pasé mucho tiempo observándolo, intentando averiguar por qué se veía tan amontonado, ¡hasta que me acordé!

Paso 8

A continuación vamos a dar a nuestro < div > interior un poco de estilo con este código:

Esto solo le da un poco de definición y espacia los elementos interiores lejos de los lados. Puedes ver dónde estamos en la imagen de abajo.

Al trabajar desde fuera hacia dentro, hemos dado a nuestro elemento un poco de forma y es mucho más fácil ver cómo va a terminar. También, a menudo, tendrás restricciones desde fuera hacia dentro, por ejemplo, el cuadro podría tener que encajar en una columna de cierta anchura. Por último, es una buena idea ir de afuera hacia adentro, porque entonces cualquier herencia de estilo es clara. Por ejemplo, si se hace lo contrario y se hacen primero los elementos interiores, los estilos posteriores podrían afectar a esos elementos interiores y habría que volver a ajustarlos.


Paso 9

Ahora llegamos a lo bueno: ¡las pestañas! Si añadimos este pequeño fragmento de CSS conseguiremos que las pestañas luzcan más como tales:

Este código dice que el elemento < ul > con clase 'tabs' no debe tener márgenes ni relleno. También dice que todos los elementos < li > de su interior no deben tener viñetas. Por último, cambiamos la visualización del bloque por defecto a "inline". Permítanme explicar esto último con un poco más de detalle.

  • Los elementos en una página generalmente tienen tres valores comunes para 'display'. Son block, inline, o none.
  • Poner un elemento en none lo hace invisible. Utilizaremos este dato más adelante.
  • Establecer un elemento en inline lo hace fluir junto con otros elementos como lo hace el texto. Así que aquí, en lugar de aparecer uno debajo del otro, los elementos < li > fluyen horizontalmente.
  • Establecer un elemento en block lo convierte en un área rectangular que aparece generalmente debajo del último elemento.
  • Esta es una explicación muy simplificada, puedes encontrar una más profunda en Diseño web desde cero

En realidad hay otros valores de visualización sobre los que puedes leer en Quirksmode.


Paso 10

Por supuesto, nuestras "pestañas" siguen luciendo bastante mediocres, así que vamos a darles un poco de estilo. Hemos usado el elemento < li > para posicionarlas, pero usaremos el elemento < a > para darles estilo, así:

Lo que hemos hecho aquí es:

  1. Dar estilo a la etiqueta < a > para que esté rellena y tenga los colores de fondo y de texto adecuados, y tenga la configuración de fuente correcta.
  2. Hemos creado un segundo estilo para a:hover y hemos oscurecido el color de fondo y el borde. Ten en cuenta que no necesitamos establecer todos los otros ajustes de < a > porque son heredados. Solo tenemos que cambiar los que queremos que cambien cuando el usuario pase el ratón por encima de la pestaña.
  3. Por último tenemos un tercer estilo para cuando < a > tiene class="active". Es decir, cuando la pestaña está seleccionada. Aquí también establecemos el color de fondo en blanco y cambiamos el color del texto. Una cosa a tener en cuenta es que también cambiamos el borde inferior a blanco. Esto es para que la pestaña se vea como si estuviera unida al área de contenido (¡cuando la agreguemos después!)

Paso 11

Hay dos cosas que debemos hacer para que las áreas de contenido funcionen. La primera es que debemos hacer que las dos áreas secundarias se desvanezcan y la segunda es hacer que tengan un estilo adecuado.

Verás que la primera parte del CSS le dice al navegador que todos los elementos con class="content" deben ser blancos con relleno y un borde (del mismo color que las pestañas). La segunda parte dice que los elementos con id="content_2" y id="content_3" deben tener un display:none, o en otras palabras deben ser invisibles.

Más adelante, cuando añadamos algo de Javascript, podremos utilizar el script para alternar entre display:none y display:block para hacer que se muestren y se oculten.

Así que aquí está el aspecto de nuestras pestañas, también puedes ver una versión HTML de donde estamos. Como puedes ver, se ve bastante bien ahora, pero tenemos que arreglar el espaciado y añadir algo de contenido real.


Paso 12

Arreglar el problema de espaciado es en realidad simplemente una cuestión de añadir márgenes de nuevo al elemento < ul > de esta manera:

Para ser sincero, no estoy seguro de por qué se ha producido ese problema de espaciado. A veces HTML me desconcierta, pero simplemente ajusto la configuración hasta que las cosas se arreglan solas. A veces, en el proceso, descubro cuál era la causa, otras veces no. Supongo que lo que quiero decir es que, a menos que te metas de lleno en los detalles de las especificaciones w3, tarde o temprano te encontrarás con algunos problemas que no podrás explicar. No dejes que esto te desanime, simplemente haz ajustes hasta que encuentres un arreglo o una solución.


Paso 13

Ahora vamos a añadir algo de contenido en el área de contenido. Evité hacer esto antes ya que quería mantener el HTML con una apariencia simple. A continuación te muestro:

Aquí solo añadí un montón de listas desordenadas en las tres áreas de contenido. Por cierto, estoy haciendo un modelo como si fuera a ser utilizado en un blog de WordPress. Pero en realidad se podría utilizar para todo tipo de cosas. La nueva página de inicio de FlashDen en la que trabajé hace unos días utiliza áreas con pestañas para mostrar diferentes tipos de archivos recientes.

Ahora añadiremos un poco de estilo para que se vean un poco mejor:

Una vez más estamos estilizando nuestras listas. Esta vez, en lugar de dar al elemento < ul > un nombre de clase, simplemente he añadido estilos a todos los elementos < ul > dentro de elementos con class="content". Esto significa que no necesito escribir tantos nombres de clase en mi HTML, lo que lo hace más ordenado y limpio.

Otras cosas a tener en cuenta:

  1. Una vez más hemos eliminado las viñetas de los elementos < li > con list-style:none.
  2. Esta vez estamos estilizando los elementos de la lista en lugar de los < a >. Esto es importante porque en caso de que tengamos un elemento de menú que no sea un enlace, de esta manera seguirá encajando perfectamente.
  3. Una vez más he utilizado un < small > dentro del < a > para que la entrada cuente. Usé una transformación de texto para hacerla en mayúsculas y un poco de posicionamiento relativo para empujarla un poco hacia la derecha.

Paso 14

Así es como se ve nuestra página:

En general está bastante bien, excepto que tenemos un borde de más. Pero no pasa nada, podemos arreglarlo con un pseudoselector mágico llamado 'last-child' como este:

Este estilo solo se aplica al último elemento de su clase, es decir, a ese último elemento < li >. Ahora debo señalar que last-child no funciona en todos los navegadores. En particular, a IE6 no le gusta. Pero no pasa nada, no es el fin del mundo si el borde está ahí, es mi forma sutil de castigar a quien no tenga un navegador al menos vagamente actualizado :-)


Paso 15

Ahora solo queda un paso más para terminar nuestro HTML, y es poner unas agradables imágenes de fondo a nuestros elementos. Como recordarás, algunos de los elementos de mi archivo PSD original tenían sutiles degradados. Así que ahora es el momento de añadirlos. Hay tres partes degradadas: (a) en la pestaña activa (b) en las pestañas inactivas y (c) en la parte inferior del área de contenido. Aquí están las tres imágenes que necesitaremos:

Son un poco difíciles de ver, pero básicamente cada una es una pequeña porción del degradado que estableceremos como imágenes de fondo que se repiten. Aquí hay un primer plano de la de la pestaña (fíjate que añadí un borde fino alrededor para que sea un poco más clara. Observa que hay una línea blanca de 1px en la parte superior. Eso hará que la pestaña se vea realmente nítida.

Tenemos que hacer algunos ajustes en el código CSS para añadir las imágenes de fondo, así:

Ten en cuenta que en realidad inserté estos elementos adicionales con el resto de sus definiciones de clase, pero en aras de la brevedad solo he copiado los extractos. Como se puede ver en los tres casos estamos repitiendo una imagen de fondo a lo largo del eje x solamente. En el caso de dos (la pestaña desactivada y el área de contenido) lo estamos haciendo a lo largo de la parte inferior, y en la otra es a lo largo de la parte superior.


¡Estilizado listo!

Y con esto hemos terminado oficialmente la parte de HTML/CSS de este tutorial. Puedes ver la página con el estilizado listo aquí.


Añade un Script simple

Lo siguiente que tenemos que hacer es añadir algo de Javascript para hacer que nuestras pestañas realmente hagan algo. Primero vamos a hacer esto a mano y luego te mostraré cómo usar una biblioteca de Javascript para lograr lo mismo. ¡Ahora debo señalar que no soy un experto en JS, y estoy esperando traer a algunos verdaderos maestros de la programación para escribir tutoriales aquí, así que si me ves haciendo algo que es un poco dudoso, ¡por favor déjame un comentario para modificar el tutorial y hacerlo un poco mejor!

Primero vamos a definir lo que queremos hacer cuando alguien hace clic en una pestaña. Queremos desactivar nuestra pestaña actual, activar la nueva, ocultar el área de contenido actual y mostrar la nueva.

Ahora podríamos utilizar algo sofisticado que averigüe qué pestaña está activada y la desactive, pero es más fácil ir a través de ellas y desactivarlas todas, y luego activar la que queramos. Del mismo modo, para las áreas de contenido, podemos ocultar las tres y luego mostrar la que queramos. Esto nos ahorra tener que averiguar el estado actual de las cosas.


Encontrar elementos usando el DOM

Los elementos con los que estamos trabajando tienen el siguiente aspecto:

  1. < a href="" id="tab_1" class="active" >
  2. < div id="content_1" class="content" >

Ahora en Javascript podemos encontrar un elemento simplemente usando su identificador y el método document.getElementById(). Así que document.getElementById('content_1') nos daría la primera área de contenido. Podemos entonces establecer su estilo de visualización a none usando esta línea:

document.getElementById('content_1').style.display = 'none';

Del mismo modo para ver una clase utilizamos:

document.getElementById('tab_1').className = 'active';

Entonces un enfoque muy simple sería escribir:

Esto se colocaría dentro de un archivo, llamémoslo functions.js. Entonces llamaríamos a este script cambiando los enlaces de nuestras pestañas a:

Y efectivamente, aquí tenemos un ejemplo de nuestro súper sencillo javascript. ¡Funciona!


Un script más complejo

Ahora hay algunos problemas muy obvios con este script. Uno de ellos es que si añades otra pestaña vas a tener que cambiar tu función. Y si tienes más de un conjunto de pestañas en una página, ¡necesitarás dos funciones! Así que vamos a reforzarlo un poco:

Nuestra segunda versión de la función de cambio de pestaña toma un par de argumentos más, pero es un poco más inteligente. Asume que tenemos un conjunto de pestañas y un conjunto de áreas de contenido y que tienen identificadores que tienen un prefijo y un conjunto de números incrementales. Es decir, tab_1, tab_2 ... y content_1, content_2 ...

El primer argumento que toma nuestra función, 'active', es el número de pestaña/contenido que queremos. El segundo argumento, 'number', es el número de pestañas que se utilizan. El tercer y cuarto argumento son los prefijos utilizados en los identificadores de nuestros elementos.

La función tiene un bucle que va desde 1 hasta el número de pestañas y las desactiva todas, y luego vuelve a activar las dos que queremos al final. En otras palabras, es el mismo script que antes, pero lo hemos hecho un poco más inteligente.

En nuestro ejemplo, para llamar a la función tendríamos este código:

Esto significa que más adelante, si tuviéramos un segundo conjunto de pestañas, podríamos darles diferentes prefijos de identificación y utilizar la misma función una y otra vez.

Vista del segundo ejemplo de javascript.


Usando jQuery

Últimamente han aparecido muchas bibliotecas de Javascript, y de hecho hay (al menos) dos que están hechas específicamente para conseguir este efecto de pestañas: MooTabs y DomTab. No he usado ninguna de las dos, pero a simple vista parecían bastante usables.

Sin embargo, como he oído hablar mucho de la biblioteca jQuery, decidí intentar el mismo cambio de pestañas usando jQuery. Tengo la sensación de que mi solución podría necesitar algo de trabajo, pero sigue siendo interesante de contemplar.

Entonces, primero, ve al sitio de jQuery y descarga la última versión de su biblioteca de scripts.


Cómo entender jQuery

jQuery proporciona un montón de funciones que te permiten seleccionar grupos de cosas. Por ejemplo, si quieres seleccionar todos los elementos de la página que son enlaces (es decir, los elementos < a >) y luego hacerlos desaparecer, colocarías esto en tu área < head >:

La primera línea añade la biblioteca de scripts jQuery. El área de script principal está dentro de un fragmento de código que se parece a esto: $(document).ready(function(){}); Esto básicamente le dice a tu navegador que ejecute todo lo que hay dentro cuando llegue a la página. Así que en nuestro caso le estamos dando el comando:

1$("a").slideUp();Esto dice que se encuentre todo lo que es un < a > y se ejecute slideUp() allí. O en otras palabras: encontrar todos los enlaces y hacerlos desaparecer con un efecto de deslizamiento hacia arriba. Prueba a añadir ese script a una página, cárgala y verás cómo todos tus enlaces desaparecen. Muy bonito, ¿no?

De todos modos, hay un montón de formas de seleccionar cosas, y puedes leer sobre ellas en la API y la documentación. Puedes hacer cosas como encontrar todos los elementos con una determinada clase, un determinado identificador, etc. En algún momento escribiré un tutorial de introducción a jQuery aquí, pero por el momento, este pequeño adelanto será suficiente, ¡además solo tengo una hora de experiencia con jQuery por lo que sería ridículo que escribiera una introducción!

Deslizamiento con selectores

Tras un poco de experimentación se me ocurrió una forma de usar jQuery para hacer que mis pestañas se deslizaran hacia dentro y hacia fuera. Para ello primero modifiqué mis enlaces para que no tuvieran ningún javascript, sino que tuvieran un atributo title y un extra class="tab". Fíjate que puedes darle a un elemento dos clases haciendo esto: class="tab active".

Ahora usando estos dos elementos, básicamente puedo obtener todos los enlaces con la clase 'tab' y también puedo encontrar cualquier elemento cuyo identificador sea igual al atributo title del enlace que acaba de ser pulsado. Aquí está el script (colocado en el < head >) que explica esto un poco mejor:

He añadido comentarios para ayudar con la explicación. Básicamente cuando se hace clic en cualquier enlace con la clase 'tab', hacemos todo dentro de esa función.

Y para ver el ejemplo final de trabajo con jQuery, ¡haz clic aquí!


Palabras finales

Bien, unos minutos después de hacer mi ejemplo con jQuery, descubrí que de hecho hay un control visual especial de 'tabs' en jQuery. Tendré que jugar con él mañana, ya que sin duda ¡me hará la vida mucho más sencilla!

Mientras tanto, espero que hayas disfrutado del tutorial y hayas aprendido algo de él.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.