javascript - 如何将选择的 Twitter Bootstrap 选项卡包装为一种形式？

我有一个 Twitter Bootstrap 选项卡组件。

我希望其中两个选项卡成为表单的一部分。第三个不是。

所以我想，我将把这两个选项卡包装在一个表单中。

基本上，当类被应用到正确的元素时，表单似乎阻止了相应的选项卡改变它们的可见性。

我该如何解决这个问题？

<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>

最佳答案

好的，

找到解决方案:

使用一点 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;
}

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

关于javascript - 如何将选择的 Twitter Bootstrap 选项卡包装为一种形式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12503966/

javascript - 如何将选择的 Twitter Bootstrap 选项卡包装为一种形式？

上一篇：javascript - 一个不会在刷新时重置的计时器

下一篇：javascript - MQTT Javascript