webentwicklung-frage-antwort-db.com.de

Wie füge ich in Bootstrap-Registerkarten ein nahes Symbol hinzu?

Ich möchte ein Schließen-Symbol in den Bootstrap-Registerkarten hinzufügen und kann dann die Registerkarte schließen, indem Sie auf das Symbol klicken.

Ich versuche es unten, aber das "X" wird nicht in derselben Zeile wie der Tabulatortitel 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>
19
sureone

die Arbeitsgeige ist hier

 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

});
 }
28
Vinod Louis

Versuchen Sie, das span-Tag innerhalb des a-Tags zu platzieren:

<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, fügen Sie ein Symbol wie dieses ein: 

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

Kleine Änderungen an der antwortrelevanten Verknüpfung von Vinod Louis 's zur li-Liste und nur show ein Register, wenn es sich um das aktuelle Schließen handelt.

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

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

Oder:

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