Wie kann man ein Schließsymbol in den Bootstrap-Registerkarten hinzufügen?

Ich möchte ein Schließen-Symbol in Bootstrap-Registerkarten hinzufügen und dann kann ich die Registerkarte durch Klicken auf das Symbol schließen.Wie kann man ein Schließsymbol in den Bootstrap-Registerkarten hinzufügen?

Ich versuche unten, aber das "X" wird nicht in der gleichen Zeile wie Registerkarte Titel angezeigt.

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

Quelle

2013-08-07 sureone

die Arbeits Geige ist 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 

}); 
}

Quelle

2013-08-07 07:10:00

Ich denke, es ist besser zu nutzen hide(). Es ist einfacher, es wieder zu zeigen. –

Danke, es funktioniert perfekt. – sureone

Wird im IE nicht gut dargestellt. Tabs sind gequetscht. – Chielt

Versuchen Sie, die Spanne-Tag in der a-Tag zu setzen:

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

Und wenn Sie Bootstrap verwenden enthalten ein Symbol wie folgt aus:

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

Quelle

2013-08-07 07:15:16 zuluk

Das Problem ist, dass, obwohl die Schließen-Schaltfläche geklickt wurde, Ein Ereignis wird an das Tag gesendet, da auch darauf geklickt wird. –

'event.preventDefault()' sollte diesen Fall behandeln. – zuluk

yep Ich weiß, ich sage nur, dass es auch etwas gibt, auf das man achten muss, und einfach nicht 'false zurückgeben', weil das andere Dinge zusätzlich zu den Standardaktionen verhindert. –

Sm alle Tweaks zu Vinod Louis 's Antwort - relativer Link zu der li Liste und nur show ein Tab, wenn es das aktuelle Schließen ist.

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 
}

Dann befestigen:

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

Oder:

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

Quelle

2016-05-29 02:16:38 Chris

Wie kann man ein Schließsymbol in den Bootstrap-Registerkarten hinzufügen?

Antwort

Verwandte Themen