2013-08-07 17 views
18

Chcę dodać ikonę zamknięcia na kartach ładowania początkowego, a następnie mogę zamknąć kartę, klikając ikonę.Jak dodać ikonę zamknięcia w zakładkach ładowania początkowego?

Próbuję poniżej, ale "X" nie jest wyświetlane w tej samej linii, co tytuł karty.

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

Odpowiedz

26

skrzypce robocza jest 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 

}); 
} 
+3

myślę, że lepiej użyć hide(). si łatwiej pokazać() ponownie. –

+0

Dzięki, działa idealnie. – sureone

+0

Nie renderuje się dobrze w IE. Karty są zgniecione. – Chielt

9

Spróbuj umieścić Span-tag wewnątrz a-tag:

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

A jeśli używasz bootstrap zawierać ikonę takiego:

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

Problem polega na tym, że mimo kliknięcia przycisku zamknięcia, zdarzenie jest wysyłane do znacznika , ponieważ jest ono również klikane. –

+0

Tak, wiem, po prostu mówię, że jest coś, na co należy zwrócić uwagę, i po prostu nie "zwracaj fałszu", ponieważ to robi inne rzeczy oprócz zapobiegania domyślnym działaniom. –

0

Sm wszystkie poprawki do odpowiedzi Vinod Louis - relatywny link do listy li i tylko show zakładka, jeśli jest to aktualne zamknięcie.

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 
} 

Następnie dołączyć:

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

czyli

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