twitter-bootstrap Bootstrap Tab 在单击时关闭活动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17507626/
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
Bootstrap Tab close active on click
提问by user2487147
I've got following code:
我有以下代码：
<div id="action_wrap">
<div id="action_nav">
<div class="action" data-target="#content1" data-toggle="tab">First Block</div>
<div class="action" data-target="#content2" data-toggle="tab">Second Block</div>
<div class="action" data-target="#content3" data-toggle="tab">Third Block</div>
</div>
<div id="action_items">
<div class="action_text collapse" id="content1">
<p>Content 1</p>
<span class="close">Close</span>
<div class="clearfix"></div>
</div>
<div class="action_text collapse" id="content2">
<p>Content 2</p>
<span class="close">Close</span>
<div class="clearfix"></div>
</div>
<div class="action_text collapse" id="content3">
<p>Content 3</p>
<span class="close">Close</span>
<div class="clearfix"></div>
</div>
</div>
</div>
and using Twitter Boostrap's "Tab" script, it works fine. I've added some really nasty looking script for close button and for nav button to get active class like so:
并使用Twitter Boostrap 的“Tab”脚本，它工作正常。我为关闭按钮和导航按钮添加了一些非常讨厌的脚本来获取活动类，如下所示：
$(".action").click(function () {
$(this).parent().children().removeClass("active");
$(this).addClass("active");
$(this).parent().addClass("active");
});
$(".close").click(function () {
$(this).parent().parent().parent().children().removeClass("active");
$(this).parent().parent().parent().children().children().removeClass("active");
});
it's not much but meh, it's working.
这并不多，但嗯，它正在起作用。
What i cannot do tho is make Bootstrap's Tab's closable by clicking active nav div. Meaning if i click first .action div with data-target on #content1, .action_text#content1 will get .active class and so will the .action div i clicked on. And what i want is for .action.active data-target="#content1" on click removing .tab()'s class "active" and same for itself.
我不能做的是通过单击活动导航 div 使 Bootstrap 的 Tab 可关闭。这意味着如果我在#content1 上单击第一个带有数据目标的 .action div，.action_text#content1 将获得 .active 类，我单击的 .action div 也会如此。而我想要的是 .action.active data-target="#content1" 单击删除 .tab() 的类“active”并且本身相同。
I found in another thread that changing the code from Bootstrap's Tab script
我在另一个线程中发现从 Bootstrap 的 Tab 脚本更改代码
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
but it seems everytime i edit it, it just breaks whole thing. I tried adding if statement like so
但似乎每次我编辑它时，它都会破坏整个事情。我尝试添加 if 语句
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
if ($(this).hasClass('active')) {
$(this).tab().removeClass('active');
$(this).removeClass('active');
} else {
e.preventDefault()
$(this).tab('show')
}
})
But whole thing stopped working.
但整件事都停止了。
回答by almeidap
First of all, you should try to avoid changing Bootstrap native code otherwise you may lose the ability to upgrade to future versions.
首先，您应该尽量避免更改 Bootstrap 本机代码，否则您可能会失去升级到未来版本的能力。
Regarding your problem, you probably run into some event concurrency issues as did I...
关于您的问题，您可能和我一样遇到了一些事件并发问题...
If you want to close active tab when clicking on tab toggle, have a look here: http://bootply.com/61835(credits to katie, I am not the owner of this script)
如果您想在单击选项卡切换时关闭活动选项卡，请查看此处：http: //bootply.com/61835（感谢 katie，我不是此脚本的所有者）
But if you want to be able to close active tab (toggle and pane) when:
但是，如果您希望能够在以下情况下关闭活动选项卡（切换和窗格）：
- Clicking on active tab toggle
- Clicking anywhere else outside tab toggle or pane
- Pressing the ESC key
- 单击活动选项卡切换
- 单击选项卡切换或窗格之外的任何其他位置
- 按 ESC 键
...then this script may help you:
...那么这个脚本可以帮助你：
$(function() {
var active = $('a[data-toggle="tab"]').parents('.active').length;
var tabClicked = false;
// Closes current active tab (toggle and pane):
var close = function() {
$('a[data-toggle="tab"]').parent().removeClass('active');
$('.tab-pane.active').removeClass('active');
active = null;
}
// Closing active tab when clicking on toggle:
$('[data-toggle=tab]').click(function(){
if ($(this).parent().hasClass('active')){
$($(this).attr("href")).toggleClass('active');
active = null;
} else {
tabClicked = true;
active = this;
}
});
// Closing active tab when clicking outside tab context (toggle and pane):
$(document).on('click.bs.tab.data-api', function(event) {
if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
close();
}
tabClicked = false;
});
// Closing active tab on ESC key release:
$(document).keyup(function(e){
if(active && e.keyCode === 27) { // ESC
close();
}
});
});
You can try it with this JSFiddle: http://jsfiddle.net/almeidap/EAuUY/(uses Bootstrap 3)
你可以用这个 JSFiddle 试试：http: //jsfiddle.net/almeidap/EAuUY/（使用 Bootstrap 3）
回答by Artistan
this will actually close tabs even with fully qualified urls.
即使使用完全限定的网址，这实际上也会关闭标签。
$('[data-toggle=tab]').click(function(){
if ($(this).parent().hasClass('active')){
var url = $(this).attr('href');
var tid = url.split('#')[1];
console.log(tid);
$('#'+tid).toggleClass('active');
document.location.hash = '';
}
});
/// also can work with pills by switching to $('[data-toggle=pill]')
