web-dev-qa-db-fra.com

Comment ajouter une icône de fermeture dans les onglets bootstrap?

Je veux ajouter une icône de fermeture dans les onglets bootstrap, puis je peux fermer l'onglet en cliquant sur l'icône.

J'essaie ci-dessous mais le "X" est affiché pas sur la même ligne que le titre de l'onglet.

.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>
javascriptjquerycsstwitter-bootstrapbootstrap-tabs
19
sureone

le violon en marche est ici

 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

Essayez de placer la balise span dans la balise a:

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

Et si vous utilisez bootstrap, incluez une icône comme celle-ci: 

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

Petits ajustements de la réponse de Vinod Louis - lien relatif vers la liste li et uniquement show un onglet s’il s’agit du dernier fermant.

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
}

Puis attachez:

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

Ou:

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