Bootstrap选项卡 - 隐藏选项卡的内容仍可编辑

Question

使用Bootstrap v3 - 我有(2)个选项卡,每个选项卡都有一个表单.第一个标签的形式比第二个标签的形状小得多(高度).我尝试了几种不同的方法.

两种方法都使用以下标记:

<div id="container" class="account">
    <header class="clearfix">
        <ul class="nav nav-tabs" data-tabs="tabs">
            <li class="active">
                <a href="#ingresar" data-toggle="tab">Ingresar</a>
            </li>
            <li>
                <a href="#crear-una-cuenta" data-toggle="tab">Crear una cuenta</a>
            </li>
        </ul>
    </header>
</div>
<div class="account-container">
    <div class="tab-content row">
        <div class="col-md-8">
            <div id="ingresar" class="tab-pane fade in active">
                // form here  ***********
            </div>
            <div id="crear-una-cuenta" class="tab-pane fade">
                // loooooong form here ************
            </div>
        </div>
    </div>
</div>

---

您可以在下面的小提琴中看到没有CSS应用,当第二个表单的选项卡处于活动状态时,第二个表单上方的第一个表单中有空格

见小提琴1

因此,我添加了下面的CSS,当第二个选项卡处于活动状态时,"空白空间"不再存在.

.account-container .fade {
    height: 0;
}
    .account-container .fade.in {
        height: 100%;
    }

---

现在第二个标签上的空格消失了.但是,第一个选项卡在表单下方有大量空间(从隐藏的第二个表单).

请参阅应用了CSS的小提琴2

我试图从我的localhost复制我的问题,但是当第一个选项卡处于活动状态时,您仍然可以突出显示隐藏的第二个选项卡中的输入,并输入文本.(见图)

---

所以当我通过添加一些额外的CSS来激活选项卡时,我试图隐藏表单

小提琴附加CSS

.account-container .fade {
    height: 0;
}

    .account-container .fade form {
        display: none;
    }

    .account-container .fade.in {
        height: 100%;
    }

        .account-container .fade.in form {
            display: block;
        }

问题是这是页面跳转b/c这些选项卡是页面上唯一的东西(除了标题,导航和页脚).然后,我尝试挂钩到Bootstrap的show.bs.tab事件,以在选项卡实际切换之前显示表单,但它不起作用.

编辑: - 更改jQuery - 仍然无法正常工作

  $('.account').on('show.bs.tab', 'a[href^="#"]', function (e) {
    $('.account-container').find('div[id="' + $(this).attr('href') + '"]').find('form').show();
});

还有其他想法吗？

Answer 1

你能尝试添加这条css线吗？

.tab-pane:not(.active) {
    display: none;
}

在这里,我为那些未激活的选项卡设置display none.这样你也不需要任何js.