如何在 Twitter 引导程序中使用包含 3 个标签的 5 个标签的表单标签？答案

【问题标题】：How to use form tags that wraps 3 tabs of 5 in Twitter bootstrap?如何在 Twitter 引导程序中使用包含 3 个标签的 5 个标签的表单标签？
【发布时间】：2016-01-03 22:18:06
【问题描述】：

我有一个 twitter 引导选项卡组件，其中有五个选项卡。我希望其中 3 个选项卡成为表单的一部分，而第 4、5 个不是。

所以我想，我只是将 3 个选项卡包装在一个表单中。但它不起作用。我已经检查了How to wrap a selection of twitter bootstrap tabs as one form? 这个线程，从第一个答案中得到了两个问题。由于在第二个答案中解释了问题，但我期待使用 js 并且不修改引导核心文件的更好解决方案。

我正在使用 twitter 引导程序 3.3.2。我该如何解决这个问题？

这里是示例代码：

<div class="row">
    <div class="col-lg-12 animated-panel zoomIn" style="animation-delay: 0.4s;">
        <div class="hpanel">
            <ul class="nav nav-tabs" data-tabs="tabs">
                <li class="active"><a href="#tab-1" data-toggle="tab">First</a></li>
                <li class=""><a href="#tab-2" data-toggle="tab">Second</a></li>
                <li class=""><a href="#tab-3" data-toggle="tab">Third</a></li>
                <li class=""><a href="#tab-4" data-toggle="tab">Fourth</a></li>
                <li class=""><a href="#tab-5" data-toggle="tab">Fifth</a></li>
            </ul>
            <div class="tab-content">
            <form>
                <div class="tab-pane active" id="tab-1">
                    <div class="panel-body">First tab fields
                    </div>
                </div>
                <div class="tab-pane" id="tab-2">
                    <div class="panel-body">Second tab fiels
                    </div>
                </div>
                <div class="tab-pane" id="tab-3">
                    <div class="panel-body">Third tab fields
                    </div>
                </div>
                </form>
                <div class="tab-pane" id="tab-4">
                    <div class="panel-body">Fourth tab content
                    </div>
                </div>
                    <div class="tab-pane" id="tab-5">
                    <div class="panel-body">Fifth tab content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

我猜由于引导 javascript 与这种表单放置冲突，如果你真的想在这种表单放置中使用引导选项卡，你需要构建一个（肮脏的）解决方法。

您可以在前三个选项卡的每一个中放置一个表单，然后将其他表单的内容复制（仅用于提交）到提交的表单中。

@lonesomeday mentions a way to intercept submitting forms

所以你可以做类似的事情

$(document).on('submit', '.tab-pane:lt(3) form', function(e){
   e.preventDefault();
   $('.tab-pane:lt(3) form').not($(this)).children().clone().addClass('toRemove').hide().appendTo($(this));
   this.submit();
   $('.toRemove').remove();
});

注意：我没有测试上面的代码

如果您的提交按钮/触发器位于选项卡结构之外，您只需将三个选项卡的内容复制到页面上任何位置的隐藏表单中并提交。

另一种方法是在不使用表单的情况下调用 jQuery 的 ajax。

【讨论】：