如何在引导选项卡中添加关闭图标？答案

【问题标题】：How to add a close icon in bootstrap tabs?如何在引导选项卡中添加关闭图标？
【发布时间】：2013-08-07 07:03:39
【问题描述】：

我想在引导选项卡中添加一个关闭图标，然后我可以通过单击该图标来关闭选项卡。

我在下面尝试，但“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>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootstrap-tabs

【解决方案1】：

工作小提琴是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

});
 }

【讨论】：

我认为最好使用 hide()。 si 更容易再次显示（）它。
-1 用于小提琴示例，您将
我会在显示最后一个标签之前添加一个检查以查看当前是否显示要删除的标签：if ($(tabContentId).is(":visible"))
@m_david 如果您希望按钮出现在选项卡上，如小提琴所示，但又想避免 <button> 出现在 <a> 中，还有什么选择？在这里查看我的相关问题：stackoverflow.com/questions/39403406/…

【解决方案2】：

尝试将 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>

如果您使用引导程序，请包含这样的图标：

<i class="icon-remove"></i>

【讨论】：

问题是即使点击了关闭按钮，一个事件也会发送到标签，因为它也被点击了。
event.preventDefault()应该处理这种情况。
是的，我知道，我只是说还有一些需要注意的地方，而不是 return false;，因为除了阻止默认操作之外，它还会做其他事情。
我使用过这个解决方案，但 event.preventDefault() 不是我需要的：要停止父 <a> 标记注册事件，我必须使用 event.stopPropagation()。

【解决方案3】：

对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
}

然后附上：

$(".closeTab").click(close_tab(this));

或者：

<button class="close closeTab" type="button" onclick="close_tab(this)" >×</button>

【讨论】：