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

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

我尝试下面，但“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; } The tab × 

Answer 1

工作小提琴就在这里

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

Answer 2

尝试将span-tag放在a-tag中：

 The tab× 

如果你使用bootstrap包含这样的图标：

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

要么：

 ×