Jquery 引导选项卡-隐藏选项卡'；s的内容仍然是可编辑的

使用BootstrapV3-我有（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在选项卡不活动时隐藏表单

问题是页面跳转b/c这些选项卡是页面上唯一的内容（页眉、导航和页脚除外）。然后，我尝试在选项卡实际切换之前，连接到Bootstrap的

show.bs.tab

事件以显示表单，但没有成功

EDIT:-更改了jQuery-仍然不起作用

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

---

还有其他想法吗？

你能尝试添加这行css吗

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

---

在这里，我为那些不活动的选项卡设置显示无。这样你就不需要任何js了。

你能试着添加css行吗

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

---

在这里，我为那些不活动的选项卡设置显示无。这样你就不需要任何js了。

如果我在这里得到了你想要的东西。这是一把有效的小提琴：

---

如果我能得到你想要的。这是一把有效的小提琴：

---

这会起作用，但我有列

col-md-8

包装

选项卡窗格

元素。看到这会起作用，但我有列

col-md-8

包装

选项卡窗格

元素。看到我想知道这一点-我应用了

fade

类，所以

不透明度

设置为0，但是添加这个CSS也有同样的效果。你需要一直添加这个吗？淡入淡出类基本上用于不透明度的动画。不透明度描述元素的透明度级别，因此在本例中，元素在那里，但您看不到。使用最新的引导程序，您不需要添加此项，因为它们有此修复程序。

。选项卡窗格：不（.active）。显示{display:none！important；}

解决了我的问题。我想知道这一点-我应用了

淡入

类，因此

不透明度

设置为0，但添加此CSS具有相同的效果。你需要一直添加这个吗？淡入淡出类基本上用于不透明度的动画。不透明度描述元素的透明度级别，因此在本例中，元素在那里，但您看不到。使用最新的引导程序，您不需要添加此项，因为他们有此修复程序。

。选项卡窗格：未（.active）。show{display:none！important；}

解决了我的问题。

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