jQuery 如何在引导程序选项卡中添加关闭图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18096724/
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
How to add a close icon in bootstrap tabs?
提问by sureone
I want to add a close icon in bootstrap tabs and then I can close the tab by click the icon.
我想在引导程序选项卡中添加一个关闭图标，然后我可以通过单击该图标来关闭该选项卡。
I try below but the "X" is displayed not on the same line as tab title.
我在下面尝试，但“X”与选项卡标题不在同一行显示。
.close {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
text-decoration: none;
display:inline;
}
.close:hover {
display:inline;
color: #000000;
text-decoration: none;
opacity: 0.4;
filter: alpha(opacity=40);
cursor: pointer;
}
<a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab</a>
<span class="close">×</span>
回答by Vinod Louis
the working fiddle is here
工作小提琴在这里
function registerCloseEvent() {
$(".closeTab").click(function () {
//there are multiple elements which has .closeTab icon so close the tab whose close icon is clicked
var tabContentId = $(this).parent().attr("href");
$(this).parent().parent().remove(); //remove li of tab
$('#myTab a:last').tab('show'); // Select first tab
$(tabContentId).remove(); //remove respective tab content
});
}
回答by zuluk
Try to put the span-tag inside the a-tag:
尝试将 span-tag 放在 a-tag 中：
<a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab<span class="close">×</span></a>
And if you use bootstrap include an icon like this:
如果你使用 bootstrap 包含一个像这样的图标：
<i class="icon-remove"></i>
回答by Chris
Small tweaks to Vinod Louis's answer - relative link to the lilist and only showa tab if it is the current one closing.
对Vinod Louis答案的小调整-li列表的相对链接，show如果是当前关闭的选项卡，则只有一个选项卡。
function close_tab (tab_li)
{
var tabContentId = $(tab_li).parent().attr("href");
var li_list = $(tab_li).parent().parent().parent();
$(tab_li).parent().parent().remove(); //remove li of tab
if ($(tabContentId).is(":visible")) {
li_list.find("a").eq(0).tab('show'); // Select first tab
}
$(tabContentId).remove(); //remove respective tab content
}
Then attach:
然后附上：
$(".closeTab").click(close_tab(this));
Or:
或者：
<button class="close closeTab" type="button" onclick="close_tab(this)" >×</button>
