jquery - 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 的 fiddle 中看到，当第二个表单的选项卡处于事件状态时，第一个表单在第二个表单上方有空间

See Fiddle 1

因此，我添加了以下 CSS，当第二个选项卡处于事件状态时，“空白空间”不再存在。

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

<小时/>

现在第二个选项卡上的空间消失了。但是，第一个选项卡在表单下方有大量空间(来自隐藏的第二个表单)。

See Fiddle 2 with CSS applied

我尝试从本地主机复制 fiddle 上的问题，但是当第一个选项卡处于事件状态时，您仍然可以突出显示隐藏的第二个选项卡中的输入，并输入文本。 (见图)

<小时/>

因此，我尝试通过添加一些额外的 CSS 在选项卡未处于事件状态时隐藏表单

Fiddle w/ additional 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;
        }

问题是页面跳转，因为这些选项卡是页面上唯一的内容(页眉、导航和页脚除外)。然后，我尝试 Hook 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;
}

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