0

i want make an URL (<a>) in a tab to go to a another tab. I don't want the URL in the navbar, but outside of the navbar; just lonely external url who can change the active tab

Actually my code look like this :

<nav class="navbar logsubnav px-0 py-0">
    <ul class="navbar logsubnav px-0 py-0 nav nav-fill w-100">
        <li class="nav-item NIModal"><a class="nav-link" href="#tabconnexion" data-toggle="tab">Connexion</a></li>
        <li class="nav-item NIModal"><a class="nav-link" id="tabco" href="#tabinscription" data-toggle="tab">Inscription</a></li>
        <li class="nav-item NIModal"><a class="nav-link bg-danger" id="closeTabSubLog" href="#" data-dismiss="modal"><i class="fas fa-times fa-2x"></i></a>
    </ul>
</nav>

<div class="tab-pane fade show active" id="tabconnexion">
    <form id="co-form" action="" method="POST">

        <div class="form-group">
            <label for="emailco">E-mail :</label>
            <input class="form-control" type="text" id="emailco" name="emailco" class="form-control">
        </div>
        <div class="form-group">
            <label for="passwordco">Mot de passe :</label>
            <input class="form-control" type="password" id="passwordco" name="passwordco" class="form-control">
            <a id="forgetpwd" href="#tabforget" data-toggle="tab">Mot de passe oubli&eacute; ?</a>
        </div>                  
        <div class="form-check"><label>
            <input class="form-check-input" type="checkbox" id="remember" name="remember" value="1">Rester connect&eacute;
        </div>
        <button name="submitco" type="submit" class="btn btn-info">Se connecter</button>
        <button type="reset" class="btn btn-danger" data-dismiss="modal">Annuler</button>
        <p class="msgErreurco"></p>

    </form>
</div>

I want the URL with the ID "forgetpwd" open the tab "#tabforget" Actually I can open one time the tab #tabforget with the url "#forgetpwd" but only one time, when I click a second time on the URL "#forgetpwd" nothing happening, but if i put the link in the navbar, everything works.

David P.
  • 1
  • 2
  • Possible duplicate of [Linking to a Bootstrap Tab from outside - how to set the tab to "active"?](https://stackoverflow.com/questions/19814481/linking-to-a-bootstrap-tab-from-outside-how-to-set-the-tab-to-active) – Jeppe Feb 19 '19 at 08:26

1 Answers1

0

My problem is solved

In first I put a new nav item in the navbar for go to the "tabforget" tab.

I gave to the link of nav item class="invisible" for hide him with Bootstrap.

I gave him also a id "tabfolink" on the <a> and id "hiddenItem" on the <li>.

<nav class="navbar logsubnav px-0 py-0">
    <ul class="navbar logsubnav px-0 py-0 nav nav-fill w-100">
        <li class="nav-item"><a class="nav-link" id="tabco" href="#tabconnexion" data-toggle="tab">Connexion</a></li>
        <li class="nav-item"><a class="nav-link" href="#tabinscription" data-toggle="tab">Inscription</a></li>
        <li id="hiddenItem"><a id="tabfolink" class="invisible" href="#tabforget" data-toggle="tab"></a></li>
        <li class="nav-item"><a class="nav-link bg-danger" id="closeTabSubLog" href="#" data-dismiss="modal"><i class="fas fa-times fa-2x"></i></a>
    </ul>
</nav>

After that, in my CSS i put :

#hiddenItem{
    width: 0px;
}

For hide the <li>.

And I added some jQuery script :

$('#forgetpwd').click(function(){
    $('#tabfolink').click();
  });
David P.
  • 1
  • 2