Comment ouvrir un onglet à partir d'un lien externe?

Question

Je suis en train d'utiliser Bootstrap 4 pour ma page web, j'ai un problème avec les nav-tabs.

J'ai besoin d'ouvrir un onglet Mot de passe oublié depuis la page de contenu de l'onglet Connexion via un lien hypertexte.

Le code ci-dessous fonctionne pour moi en Bootstrap 3 mais pas en Bootstrap 4

    Connexion
    Mot de passe oublié
    S'inscrire

        Onglet Connexion
        Aller à Mot de passe oublié

    Onglet Mot de passe oublié
    Onglet s'inscrire

Answer 1

Il existe deux approches que je peux envisager pour résoudre ce problème :

1. Comme Bootstrap 4 n'utilise pas les url #hash pour la navigation des onglets, un simple script JavaScript peut écouter les événements de clic sur les liens réguliers et déclencher des clics supplémentaires –sous le capot– sur les onglets correspondants.
2. Utilisez des url #hashes et ouvrez les onglets en fonction de la modification de cette valeur. Cette approche présente également l'avantage que les onglets seront directement linkables, vous pourriez ainsi utiliser par exemple exemple.com#sign-up pour ouvrir une page avec un onglet spécifique ouvert.

Vous trouverez ci-dessous deux extraits de code pour chaque approche.

1. Clics sous le capot:

$('.tab-link').on('click', function(event) {
    // Empêcher le changement d'URL
    event.preventDefault();

    // `this` est la balise  cliquée
    $('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})

`* Se connecter

*           [Mot de passe oublié](#forgot-password)

*           [S'inscrire](#sign-up)

    Onglet de connexion  
    [Aller à Mot de passe oublié](#forgot-password)

    Onglet Mot de passe oublié

    Onglet S'inscrire` 

2. Utilisation de hash dans l'URL:

$(document).ready(function() {
    function onHashChange() {
        var hash = window.location.hash;

        if (hash) {
            // en utilisant la syntaxe de chaîne de modèle ES6
            $(`[data-toggle="tab"][href="${hash}"]`).trigger('click');
        }
    }

    window.addEventListener('hashchange', onHashChange, false);
    onHashChange();
});

        Se connecter

        Mot de passe oublié

        S'inscrire

        Onglet de connexion
        Aller à Mot de passe oublié

        Onglet Mot de passe oublié

        Onglet S'inscrire

Answer 2

Cela peut être réalisé avec jQuery en déclenchant une fonction qui change l'onglet lorsque le lien est cliqué.

HTML

    Se connecter

    Mot de passe oublié

    S'inscrire

    Onglet de connexion
    Aller à Mot de passe oublié

  Onglet de mot de passe oublié
  Onglet d'inscription

Javascript

$( ".forgot-password-link" ).click(function() {
    $('#myTabs li:nth-child(2) a').tab('show')
});

Exemple Codepen : https://codepen.io/Washable/pen/VQYewy