Cách thêm biểu tượng đóng trong các tab bootstrap?

Question

Tôi muốn thêm biểu tượng đóng trong các tab khởi động và sau đó tôi có thể đóng tab bằng cách nhấp vào biểu tượng.

Tôi thử dưới đây nhưng "X" được hiển thị không trên cùng dòng với tiêu đề tab.

.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

fiddle làm việc là 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

Cố gắng đưa span-tag bên trong một thẻ:

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

Và nếu bạn sử dụng bootstrap bao gồm một biểu tượng như thế này:

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

Answer 3

Sm tất cả các điều chỉnh cho câu trả lời của Vinod Louis - liên kết tương đối với danh sách li và chỉ show một tab nếu đó là tab hiện tại đang đóng.

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 
} 

Sau đó đính kèm:

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

Hoặc:

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