如何将选择的twitter引导标签作为一种形式包装？ [英] How to wrap a selection of twitter bootstrap tabs as one form?
问题描述
我有一个twitter引导标签组件。
我希望两个标签是表单的一部分。第三个不是。
所以我想，我只是将这两个标签包装在一个表单中。
但它不起作用： http://jsfiddle.net/gLrr4/1/
基本上，当类被应用到正确的元素时，表单似乎停止了各个标签改变其可见性。
我该如何解决这个问题？
演示： http://jsfiddle.net/gLrr4/1/
演示代码：
< HTML>
< head>
< link rel =stylesheethref =http://twitter.github.com/bootstrap/assets/css/bootstrap.csstype =text / css/>
< script src ='http：//twitter.github.com/bootstrap/js/bootstrap-tab.js'>< / script>
< / head>
< body>
< div class =alert alert-error>选项卡1和2封装在表单标签中！< / div>
< div class ='row'>
< div class =span12>
< div class =tabbable>
< ul class =nav nav-tabs>
< li class =active>< a href =＃tab1data-toggle =tab>＃tab1< / a>< / li>
< li>< a href =＃tab2data-toggle =tab>＃tab2< / a>< / li>
< li>< a href =＃tab3data-toggle =tab>＃tab3< / a>< / li>
< / ul>
< div class =tab-content>
< form class =form-vertical>
< div class =tab-pane activeid =tab1>
< div class =alert alert-info>
这是＃tab1
< / div>
< div class ='form-actions'>
< button type ='submit'class ='btn btn-primary'>保存更改< / button>
< button id ='cancel'class ='btn'>取消< / button>
< / div>
< / div>
< div class =tab-paneid =tab2>
< div class =alert alert-info>
这是＃tab2
< / div>
< div class ='form-actions'>
< button type ='submit'class ='btn btn-primary'>保存更改< / button>
< button id ='cancel'class ='btn'>取消< / button>
< / div>
< / div>
< / form>
< div class =tab-paneid =tab3>
< div class =alert alert-info>
这是＃tab3
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
好的，
找到解决方案：
使用一点Javascript：
$（$'$ $ $ $''$ [code $（'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>形式> .tab-pane，
.pill-content>形式> .pill-pane {
display：none;
}
.tab-content>形式> .active，
.pill-content>形式> .active {
display：block;
}
现在我们可以将这些标签嵌套在一个表单中
当然这只支持表单标签，而不是任何孩子，
我可以通过删除> 的方式来支持任何元素，但问题是，如果我们有嵌套的标签，会级联下来！
I have a twitter bootstrap tabs componenet.
I want two of the tabs to be part of a form. and the third to not be.
So I thought, I'll just wrap the two tabs in a form.
But it does not work: http://jsfiddle.net/gLrr4/1/
Basically whilst the classes get applied to the right elements, it seems that the form is stopping the respective tabs from changing their visibility.
How can I fix this?
Demo: http://jsfiddle.net/gLrr4/1/
Demo Code:
<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>
Ok,
Found the solution:
With a little bit of 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');
});
And a smidge of css:
.tab-content > form > .tab-pane,
.pill-content > form > .pill-pane {
display: none;
}
.tab-content > form > .active,
.pill-content > form > .active {
display: block;
}
We can now nest the tabs in a form,
Of course this only supports form tags, not any child,
I could make it support any element by removing the >'s but the issue is that that would cascade down if we had nested tabs!
这篇关于如何将选择的twitter引导标签作为一种形式包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
