Bootstrap 4 Tab ссылка из Navbar - PullRequest
       8

Bootstrap 4 Tab ссылка из Navbar

0 голосов
/ 19 февраля 2019

Я хочу сделать URL (<a>) на вкладке, чтобы перейти на другую вкладку. Мне не нужен URL в навигационной панели, но вне навигационной панели;просто одинокий внешний URL, который может изменить активную вкладку

На самом деле мой код выглядит так:

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

Я хочу URL с идентификатором "forgetpwd", откройте вкладку "#tabforget" На самом деле я могу один раз открыть вкладку #tabforget с помощью URL "#forgetpwd", но только один раз, когда я нажимаю второй раз на URL "#forgetpwd", ничего не происходит, но если я помещаю ссылку в навигационную панель, все работает.

1 Ответ

0 голосов
/ 19 февраля 2019

Моя проблема решена

Сначала я помещаю новый элемент навигации в панель навигации для перехода на вкладку "tabforget".

Я дал ссылку на элемент навигации class="invisible"чтобы скрыть его с помощью Bootstrap.

Я также дал ему идентификатор "tabfolink" для <a> и идентификатор "hiddenItem" для <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>

После этого вМой CSS я поставил:

#hiddenItem{
    width: 0px;
}

Для скрытия <li>.

И я добавил несколько jQuery-скриптов:

$('#forgetpwd').click(function(){
    $('#tabfolink').click();
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...