如何在Twitter bootstrap中使用表单标签来包装5个标签中的3个？
如何在Twitter bootstrap中使用表单标签来包装5个标签中的3个？
提问于 2015-10-07 04:46:07
我有一个twitter引导选项卡组件，其中我有5个选项卡。我希望其中3个选项卡是表单的一部分，而第4个、第5个选项卡不是。
所以我想，我就把这3个选项卡包装在一个form.But中它不起作用。我已经检查了How to wrap a selection of twitter bootstrap tabs as one form?这个帖子，从第一个答案中得到了两个问题。因为在第二个答案中解释了问题，但我期待更好的解决方案，使用js而不修改bootstrap核心文件。
我使用的是twitter bootstrap 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>回答 1
Stack Overflow用户
发布于 2015-10-07 05:15:14
我猜由于bootstraps javascript与这种表单放置相冲突，如果你真的想在这种表单放置中使用bootstraps标签，你需要构建一个(脏的)解决方案。
您可以在前三个选项卡中的每个选项卡中放置一个表单，然后将其他表单的内容复制(仅用于提交)到已提交的表单中。
@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();
});注意：我没有测试上面的代码
如果您的提交按钮/触发器在选项卡结构之外，您只需将这三个选项卡的内容复制到页面上任何位置的隐藏表单中，然后提交此表单。
的另一种方式是调用的ajax，而不使用表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32979427
复制相关文章
相似问题
腾讯云开发者
