如何在引導選項卡中添加關閉圖標？

我想在引導標籤中添加一個關閉圖標，然後點擊圖標關閉標籤。如何在引導選項卡中添加關閉圖標？

我在下面嘗試，但「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>

來源

2013-08-07 sureone

工作小提琴是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 

}); 
}

來源

2013-08-07 07:10:00

我認爲它能夠更好地使用隱藏（）。它再次顯示（）它更容易。 –

謝謝，它工作完美。 – sureone

在IE中不能很好地呈現。標籤被壓扁。 – Chielt

嘗試把跨度標籤的一個標籤內：

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

來源

2013-08-07 07:15:16 zuluk

問題是，即使關閉按鈕被點擊，一個事件發送到標籤，因爲它也被點擊。 –

'event.preventDefault（）'應該處理這種情況。 – zuluk

是的，我知道，我只是說有些事情需要注意，並且不要「返回false」;因爲除了防止默認操作之外，它還會執行其他操作。 –

Sm所有調整到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>

來源

2016-05-29 02:16:38 Chris

如何在引導選項卡中添加關閉圖標？

回答

相關問題