我有以下代码:
<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>
并使用Twitter Boostrap's "Tab" script,它工作正常 . 我为关闭按钮添加了一些非常讨厌的脚本,并为导航按钮添加了这样的活动类:
$(".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");
});
它并不多,但是,它正在发挥作用 .
我不能做的是通过单击活动导航div使Bootstrap的Tab可以关闭 . 这意味着,如果我在#content1,.action_text#content1上点击第一个.action div,将获得.active类,所以我会点击.action div . 我想要的是.action.active data-target =“#content1”点击删除.tab()的类“活动”并且相同 .
我在另一个线程中发现从Bootstrap的Tab脚本中更改代码
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
但似乎每次我编辑它,它只是打破了整个事情 . 我试着像这样添加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')
}
})
但整件事停止了工作 .
2 回答
即使使用完全合格的网址,这实际上也会关闭标签 .
首先,您应该尽量避免更改Bootstrap本机代码,否则您可能会失去升级到未来版本的能力 .
关于你的问题,你可能遇到一些事件并发问题,我...
如果要在单击选项卡切换时关闭活动选项卡,请在此处查看:http://bootply.com/61835(贷记给katie,我不是此脚本的所有者)
但是,如果您希望能够在以下情况下关闭活动标签(切换和窗格):
单击活动选项卡切换
单击选项卡切换或窗格外的任何其他位置
按ESC键
...然后这个脚本可以帮助你:
您可以使用此JSFiddle尝试它:http://jsfiddle.net/almeidap/EAuUY/(使用Bootstrap 3)