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

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

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

。关闭{
字体大小：20px；
字体大小：粗体；
线高：18px；
颜色：#000000；
文本阴影：0 1px 0#ffffff；
不透明度：0.2；
过滤器：α（不透明度=20）；
文字装饰：无；
显示：内联；
}
.关闭：悬停{
显示：内联；
颜色：#000000；
文字装饰：无；
不透明度：0.4；
过滤器：α（不透明度=40）；
光标：指针；
}
×

工作小提琴是

---

尝试将span标记放在a标记内：

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

对的答案进行了小调整-指向

li

列表的相对链接，如果选项卡是当前选项卡，则只显示

选项卡

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));

或：

×
我认为最好使用hide（）。再次显示（）会更容易。-1对于fiddle示例，在显示最后一个选项卡之前，我会添加一个检查，查看要删除的选项卡当前是否显示：
if（$（tabContentId）.is（“：visible”）
@m\u david如果希望按钮显示在选项卡上，如fiddle中所示，有什么替代方法，但是要避免
内部
问题是，即使单击了关闭按钮，也会向标记发送一个事件，因为该按钮也被单击。
event.preventDefault（）
应该处理这种情况。是的，我知道，我只是说还有一些需要注意的事情，而不是
返回false
因为这除了防止默认操作之外还有其他作用。我使用了此解决方案，但我不需要使用
事件。preventDefault（）
：要停止注册事件的父
标记，我必须使用
事件.StopperPagation（）
。
$(".closeTab").click(close_tab(this));

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