Charger une page sur un onglet Bootstrap spécifique

On ne présente plus l’utilité des frameworks HTML/CSS et encore moins le plus connu de tous : Bootstrap. Cette boîte à outils permet à tout le monde d’implémenter des fonctionnalités HTML, CSS et javascript très simplement et avec un minimum de style. Parmi ces fonctionnalités, on retrouve les onglets (tabs). Grâce à une classe CSS, il est possible de forcer l’affichage de l’onglet de votre choix, mais si vous partagez un lien en voulant faire apparaître un autre onglet, là c’est une autre marmelade. Voici une astuce javascript qui va vous faciliter la vie.

HTML

Pour réaliser cet exemple, j’ai pris le code présenté dans la documentation de Bootstrap. La voici :

Pour bien montrer que l’impact du code que nous allons voir ci-dessous, j’ai pris le soin de placer en dessous une seconde barre de navigation d’onglets. La seule différence notable de cette seconde barre se situe dans l’ajout d’une classe “exemple” au niveau de mon <ul>. Ce qui donne :

 

Code jQuery

On enregistre dans la variable “url” le lien saisi dans la barre d’adresse. On vérifie alors avec la présence d’une ancre HTML. S’il y en a une, on précise alors que l’onglet (tab) correspondant à l’ancre de l’url dans notre classe “exemple” sera affiché. S’il ne trouve aucune correspondance, il affichera alors le premier onglet de la liste ou du moins, celui auquel vous aurez appliqué la classe “active”.

 

Démonstration

 

Rémi on twitterRémi on linkedin
Rémi
Chargé de projets web de profession, je partage à travers ce blog mes expériences, recherches et découvertes dans la création de projet web.