如何将twitter bootstrap选项卡 Package 为一个表单？

2nc8po8w 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(128)

我有一个twitter bootstrap标签组件。
我希望其中两个选项卡成为表单的一部分。第三种是不存在
所以我想，我就把这两个标签包在一个表单里。
但它不起作用：http://jsfiddle.net/gLrr4/1/
基本上，当类被应用到正确的元素时，表单似乎阻止了相应的选项卡改变它们的可见性。
我该怎么办？
演示：http://jsfiddle.net/gLrr4/1/
演示代码：

<html>
<head>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" type="text/css"/>
    <script src='http://twitter.github.com/bootstrap/js/bootstrap-tab.js'></script>
</head>
<body>
<div class="alert alert-error">Tab 1 and two are wrapped in a form tag!</div>
<div class='row'>
    <div class="span12">

        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">#tab1</a></li>
                <li><a href="#tab2" data-toggle="tab">#tab2</a></li>
                <li><a href="#tab3" data-toggle="tab">#tab3</a></li>
            </ul>

            <div class="tab-content">
                <form class="form-vertical">
                    <div class="tab-pane active" id="tab1">
                        <div class="alert alert-info">
                            This is #tab1
                        </div>
                        <div class='form-actions'>
                            <button type='submit' class='btn btn-primary'>Save changes</button>
                            <button id='cancel' class='btn'>Cancel</button>
                        </div>
                    </div>

                    <div class="tab-pane" id="tab2">
                        <div class="alert alert-info">
                            This is #tab2
                        </div>
                        <div class='form-actions'>
                            <button type='submit' class='btn btn-primary'>Save changes</button>
                            <button id='cancel' class='btn'>Cancel</button>
                        </div>
                    </div>
                </form>

                <div class="tab-pane" id="tab3">
                    <div class="alert alert-info">
                        This is #tab3
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/12503966/how-to-wrap-a-selection-of-twitter-bootstrap-tabs-as-one-form

2条答案

按热度按时间

cgvd09ve1#

用一点JavaScript：

$('a[data-toggle="tab"]').on('shown', function (e) {
    $(e.target.hash).closest('.tab-content')
        .find('> form > .tab-pane.active:not(' + e.target.hash + '), 
               > .tab-pane.active:not(' + e.target.hash + ')')
        .removeClass('active');
});

还有一点CSS：

.tab-content > form > .tab-pane,
.pill-content > form > .pill-pane {
    display: none;
}
.tab-content > form > .active,
.pill-content > form > .active {
    display: block;
}

我们现在可以在表单中嵌套选项卡。当然，这只支持表单标签，不支持任何子标签。
我可以通过删除>来使它支持任何元素，但问题是，如果我们有嵌套的选项卡，那将级联。

赞(0）回复(0）举报 2023-09-28

nkcskrwz2#

有两个问题需要“修复”才能使其工作。

第一个问题：前两个选项卡同时显示。

原因：bootstrap.css（未缩小）第4042和4047行只选择div的直接后代：

.tab-content > .tab-pane

和

.tab-content > .active

分辨率：将以下CSS添加到单独的CSS文件中：

.tab-content .tab-pane
{
  display: none;
}

.tab-content .active
{
  display: block;
}

第二个问题：第三个标签现在总是显示一旦它被点击和另一个标签被选中。

原因：这是因为Bootstrap在清除未被点击的标签页中的“active”类时，只查找容器的直接后代。在bootstrap.js的第1563行：

var $active = container.find('> .active')

分辨率：要解决此问题，您需要将此行更改为：

var $active = container.find('.active')

然而，这并不理想。如果你不想修改Bootstrap代码，你可以：

复制第1510行和第1624行之间的所有 Bootstrap 选项卡内容
将所有出现的Tab重命名为NewTab
将第1602行的$.fn.tab更改为$.fn.modifiedTab或类似内容
将第1606行的(data = new Tab(this))更改为(data = new NewTab(this))
按照文档使用它，但.tab变为.modifiedTab

赞(0）回复(0）举报 2023-09-28

我来回答

如何将twitter bootstrap选项卡 Package 为一个表单？

2条答案

第一个问题：前两个选项卡同时显示。

第二个问题：第三个标签现在总是显示一旦它被点击和另一个标签被选中。

相关问题

热门标签

最新问答