2013-08-07 5 views
18

Я хочу добавить значок закрытия на вкладках начальной загрузки, а затем я могу закрыть вкладку, щелкнув значок.Как добавить значок закрытия на вкладках начальной загрузки?

Прошу ниже, но «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> 

ответ

26

рабочей скрипку 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

я думаю, что его лучше использовать скрывать(). si это легче показать() это снова. –

+0

Спасибо, он отлично работает. – sureone

+0

В IE не отображается хорошо. Вкладки раздавлены. – Chielt

9

Попробуйте поставить калибровочный-тег внутри а-тег:

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

Проблема в том, что, хотя нажата кнопка закрытия, событие отправляется в тег , потому что на него также щелкнут. –

+0

yep Я знаю, я просто говорю, что есть кое-что, что нужно учесть, а не просто «вернуть ложь», потому что это делает другие вещи в дополнение к предотвращению действий по умолчанию. –

0

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> 
Смежные вопросы