Question

我想在选项卡中创建URL（<a>）以转到另一个选项卡。 我不希望该网址位于导航栏中，而是位于导航栏之外；只是寂寞的外部网址，他们可以更改活动标签

实际上我的代码如下：

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

我希望ID为"forgetpwd"的URL打开标签"#tabforget" 实际上，我可以一次打开带有URL #tabforget的标签"#forgetpwd"，但是只有一次，当我第二次单击URL "#forgetpwd"时，什么也没有发生，但是如果我将链接放入导航栏，一切正常。

Answer 1

我的问题解决了

首先，我将一个新的导航项放在导航栏中，以转到"tabforget"标签。

我给了导航项目class="invisible"的链接，以便用Bootstrap隐藏他。

我还给了他"tabfolink"上的ID <a>和"hiddenItem"上的ID <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();
  });

Bootstrap 4 Tab链接从导航栏退出

1 个答案: