如何在Bootstrap选项卡中添加一个关闭图标？

Question

我想在Bootstrap选项卡里添加一个关闭图标，这样当我点击该图标时就可以关闭选项卡。

我尝试了下面的代码，但是“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>

- sureone

Answer 1

这个可运行的fiddle在这里

 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

});
 }

- Vinod Louis

---

我认为最好使用hide()。这样再次显示(show())会更容易一些。 - Or Duan

为 fiddle 示例中，您将 <button> 放在 <a> 内部。为什么我们不想这样做：https://dev59.com/0Ww15IYBdhLWcg3wy-zO - m_david

在显示最后一个选项卡之前，我会添加一个检查，以查看要删除的选项卡是否当前正在显示：if ($(tabContentId).is(":visible")) - Jesse Sierks

@m_david 如果您想要在选项卡上显示按钮，但又想避免在<a>标签内使用<button>，那么有什么替代方案吗？请参阅我的相关问题：http://stackoverflow.com/questions/39403406/close-button-in-bootstrap-tabs-without-putting-button-inside-a - PurpleVermont

Answer 2

尝试将标签放在标签内：

<a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab<span class="close">×</span></a> 

如果您使用 Bootstrap，请像这样包含一个图标：

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

- zuluk

---

问题在于即使关闭按钮被点击，事件也会发送到<a>标签，因为它也被点击了。 - Ilan Biala

event.preventDefault()应该处理这种情况。 - zuluk

是的，我知道，我只是想说还有一些需要注意的地方，不要仅仅使用return false;，因为它除了阻止默认操作之外还会做其他事情。 - Ilan Biala

我曾经使用过这个解决方案，但是 event.preventDefault() 并不是我所需要的：为了阻止父级 <a> 标签注册事件，我必须使用 event.stopPropagation()。 - Alessandro

Answer 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>

- Chris