ブートストラップタブに閉じるアイコンを追加するには？

Question

ブートストラップタブにクローズアイコンを追加して、そのアイコンをクリックしてタブを閉じることができます。

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

Answer 1

作業フィドルは、A-タグ内スパンタグをつけてみ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 

}); 
} 

Answer 2

です：

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

Answer 3

SmすべてVinod Louisの応答に関連するリンクをliリストに変更し、現在の1つの閉じる場合は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>