Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4
Webdesign

Cómo agregar enlaces de profundidad al componente de pestañas en Bootstrap 4

by
Difficulty:IntermediateLength:ShortLanguages:

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

Hoy aprenderemos cómo agregar "enlaces profundos" a las pestañas Bootstrap 4. Para comprender mejor en qué estamos trabajando, consulta la página de demostración y presta atención a dos cosas:

  1. Cómo cambia la URL al hacer clic en las pestañas.
  2. Al dar a cada una de las pestañas su propia URL, el contenido se puede compartir. Si tomas la URL de una pestaña y la abres en otro navegador/ventana, la pestaña correspondiente será visible.


Ten en cuenta que la URL refleja la pestaña seleccionada

Esbozaremos tres pasos principales; el HTML, el CSS y el JavaScript. Se asume un cierto nivel de competencia para los tres. ¿Emocionado de ver cómo construiremos esto? Si la respuesta es sí, ¡comencemos!

1. Construyendo las pestañas

Comenzaremos con una plantilla de inicio tomada de la documentación de Bootstrap.

Para crear las pestañas, aprovecharemos el código de ejemplo para el componente de pestañas que Bootstrap proporciona:

2. El CSS

A continuación, especificamos algunas reglas CSS para nuestro componente. Nada demasiado elegante, solo algunos estilos básicos. Vale la pena mencionar que en un tutorial anterior, utilizamos estilos similares para crear un componente de pestaña personalizado.

Aquí están los estilos iniciales:

3. El JavaScript

Con el HTML y CSS en su lugar, es hora de ver el código JavaScript requerido (este es el bit importante).

Primero, cuando el DOM está listo, recuperamos la URL de la página y usamos una expresión regular para eliminar su barra final. Por ejemplo, si la URL original es algo/, la URL modificada será algo.

A continuación, verificamos si la URL contiene un hash. Si ese es el caso, significa que queremos mostrar el contenido de la segunda o tercera pestaña (en nuestro ejemplo). Para ello, realizamos lo siguiente:

  1. Recupera el nombre de la pestaña objetivo y actívalo utilizando el método tab de Bootstrap.
  2. Usa una expresión regular para generar el formato de URL deseado.
  3. Actualiza la URL de la página sin forzar una recarga de la página aprovechando el método replaceState.
  4. Opcionalmente, fuerza el desplazamiento de la página para comenzar desde la parte superior de la página.

Cada vez que hacemos clic en una pestaña hacemos lo siguiente:

  1. Recuperamos el valor del atributo href de esta pestaña. En nuestro caso, los valores posibles son #home, #history, #city-Attractions.
  2. Verificamos el valor del atributo y, dependiendo de eso, creamos el formato de URL deseado.
  3. Actualizamos la URL de la página sin forzar una recarga de la página aprovechando el método replaceState.

Aquí está el JavaScript que se encarga de todo eso:

4. Soporte del navegador

La demostración debería funcionar bien en todos los navegadores recientes. Para simplificar, no he usado un compilador de JavaScript (por ejemplo, Babel), pero en su propio código puede que tengas que hacerlo.

Conclusión

En este tutorial, logramos personalizar el comportamiento de las pestañas Bootstrap 4, dándole a cada pestaña una URL identificable, haciendo que su contenido sea más navegable y compartible. Ten en cuenta que el proceso implementado aquí también se puede aplicar a cualquier otro framework o incluso a un componente de pestaña personalizado.

Si hay algo que no entendiste, o algo te parece poco claro, ¡házmelo saber en los comentarios a continuación!

Otras lecturas


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