twitter-bootstrap 显示/隐藏 Twitter 引导程序选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14073019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide twitter bootstrap tabs
提问by AshAndrien
I'm using bootstrap to display content below tabs, but I want to collapse the tabs when the tab is clicked again. Here is the code I tried to get to work, to no avail:
我正在使用引导程序在选项卡下方显示内容，但我想在再次单击选项卡时折叠选项卡。这是我试图开始工作的代码，但无济于事：
<ul id="myTab" class="nav nav-tabs">
<li class="square"><a class="story" href="#article1" data-toggle="tab"><img src="#"/></a></li>
<li class="square"><a class="story" href="#article2" data-toggle="tab"><img src="#g"/></a></li>
<li class="square"><a class="story" href="#article3" data-toggle="tab"><img src="#"/></a></li>
<div id="article1" class="tab-pane fade"><p>Lorem ipsum...</p></div>
<div id="article2" class="tab-pane fade"><p>Lorem ipsum dolor sit amet....</p</div>
<div id="article3" class="tab-pane fade"><p>Lorem ipsum dolor sit amet...</p></div>
</ul>
<script>
$('#myTab a').click(function (e) {
if($(this).tab.hasClass('active')){
$(this).tab('hide');
} else {
e.preventDefault();
$(this).tab('show');
}
})
</script>
I'm not sure if tabs are supposed to work this way...should I try the collapse functionality?
我不确定标签是否应该以这种方式工作......我应该尝试折叠功能吗？
采纳答案by Jeromy French
Yes, it sounds like you want Bootstrap's collapse widget. That said, this jQuery will hide an already active tab:
是的，听起来您想要Bootstrap 的折叠小部件。也就是说，这个 jQuery 将隐藏一个已经处于活动状态的选项卡：
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
$( $(this).attr('href') ).hide();
}
});?
The problem is that this prevents a hidden tab from being shown again, so I don't think you'll want to use it. See http://jsfiddle.net/jhfrench/NQ97h/
问题是这会阻止再次显示隐藏的选项卡，因此我认为您不会想要使用它。见http://jsfiddle.net/jhfrench/NQ97h/
If you want to be able to bring the tab back, try:
如果您希望能够恢复标签，请尝试：
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
var target_pane=$(this).attr('href');
$( target_pane ).toggle( !$( target_pane ).is(":visible") );
}
});
See http://jsfiddle.net/epT3L/for this solution.
有关此解决方案，请参阅http://jsfiddle.net/epT3L/。
回答by Chris Bartley
Here's a tweak of Jeromy's solution that I believe does what you want:
这是 Jeromy 解决方案的一个调整，我相信它可以满足您的需求：
$('#myTab a').click(function (e) {
var tab = $(this);
if(tab.parent('li').hasClass('active')){
window.setTimeout(function(){
$(".tab-pane").removeClass('active');
tab.parent('li').removeClass('active');
},1);
}
});
回答by Rickedb
Got the same problem and solved by modifying the bootstrap.js.
遇到同样的问题，通过修改 bootstrap.js 解决。
Find the tab class definition (usually line 1783) on Tab.prototype.showfunction and modify:
在Tab.prototype.show函数上找到选项卡类定义（通常是第 1783 行）并修改：
if ($this.parent('li').hasClass('active')) return
if ($this.parent('li').hasClass('active')) return
to
到
if ($this.parent('li').hasClass('active')) {
$this.parent('li').removeClass('active')
$(selector).removeClass('active')
return
}
Then it will work as expected and without creating more "custom scripts" in your project.
然后它将按预期工作，而不会在您的项目中创建更多“自定义脚本”。
EDIT:
编辑：
This modification affects EVERY tab panel in your project, however, if you want to make this effect only on desired objects you'll need to add some data-hideor something like that, such as:
此修改会影响项目中的每个选项卡面板，但是，如果您只想对所需对象进行此效果，则需要添加一些data-hide或类似的内容，例如：
if ($this.parent('li').hasClass('active')) {
if ($this.parent('li').attr('data-hide') == "on") {
$this.parent('li').removeClass('active')
$(selector).removeClass('active')
}
return
}
then, every parent <li>with data-hidewill hide when click.
然后，每一位家长<li>与data-hide将隐藏时单击。
回答by Sigfried
I've got a version that works (in my case, just for the main tabs, you'll have to modify it to handle the dropdown tabs.) I just threw it into a fork of Jeromy's jsfiddle above: http://jsfiddle.net/HsqQQ/3/
我有一个有效的版本（在我的情况下，仅用于主选项卡，您必须对其进行修改以处理下拉选项卡。）我只是将它扔到上面 Jeromy 的 jsfiddle 的一个分支中：http://jsfiddle .net/QQQQ/3/
Here's the code:
这是代码：
$(document).off('click.tab.data-api');
$(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
e.preventDefault();
var tab = $($(this).attr('href'));
var activate = !tab.hasClass('active');
$('div.tab-content>div.tab-pane.active').removeClass('active');
$('ul.nav.nav-tabs>li.active').removeClass('active');
if (activate) {
$(this).tab('show')
}
});
回答by GEkk
What about to do something like that? show.bs.tabwill always fire before clickand it will give to clickthe right status
做这样的事情怎么办？show.bs.tab总是会在之前触发，click并且会给出click正确的状态
$(document).on('show.bs.tab', '#myTab a', function(e) {
if (!$(e.target).hasClass('active')) {
$(e.target).addClass('monkeyPatch');
}
});
$(document).on('click', '#myTab a', function(e) {
var tab = $(this);
if (tab.hasClass('monkeyPatch')) {
tab.removeClass('monkeyPatch');
} else {
$('.tab-pane').removeClass('active');
tab.parent('li').removeClass('active');
}
});
回答by Eckonator
I get a working bootstrap pills navigation which supports open/close toogle with this code:
我得到了一个有效的引导药丸导航，它支持使用以下代码打开/关闭工具：
jQuery(function() {
// Closing active pill when clicking on toggle:
jQuery(document).off('click.bs.tab.data-api');
jQuery(document).on('click.bs.tab.data-api', '[data-toggle="pill"]', function(e) {
e.preventDefault();
var activeClass = 'active';
var tab = jQuery(this).attr('href');
var tab = tab && tab.replace(/.*(?=#[^\s]*$)/, ''); // strip for ie7
var tab = jQuery(tab);
if (!tab.hasClass(activeClass)) {
jQuery(this).tab('show');
} else {
jQuery(this).parent().removeClass(activeClass);
tab.parent().children().removeClass(activeClass);
}
});
});
});
