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，当第二个表格的标签处于活动状态时，第二个表格上方的第一个表格中有空格

See Fiddle 1

因此，我添加了下面的CSS，当第二个标签处于活动状态时，“空白空间”不再存在。

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

现在第二个标签上的空格消失了。但是，第一个选项卡在表单下方有大量空间（从隐藏的第二个表单开始）。

See Fiddle 2 with CSS applied

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

所以我试图通过添加一些额外的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;
        }

问题是这是页面跳转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线吗？

"&lt;&lt;&lt;XML"

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

Answer 2

如果我在这里得到你想要的东西。这是一个小提琴，有效： <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> http://jsfiddle.net/bepp79jf/

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

2 个答案: