Как добавить значок закрытия на вкладки начальной загрузки?

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

Я пытаюсь ниже, но «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>

javascript jquery css twitter-bootstrap bootstrap-tabs
person sureone    schedule 07.08.2013    source источник

Ответы (3)


arrow_upward
31
arrow_downward

рабочая скрипка находится здесь

 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

});
 }
person Vinod Louis    schedule 07.08.2013
comment
я думаю, что лучше использовать hide(). si проще показать() это снова. - person Or Duan; 07.08.2013
comment
-1 для примера со скрипкой, где вы помещаете ‹button› внутри ‹a›. Почему мы этого не хотим: stackoverflow.com/questions/6393827/ - person m_david; 17.10.2015
comment
Я бы добавил проверку, отображается ли вкладка, которую нужно удалить, перед отображением последней: if ($(tabContentId).is(":visible")) - person Jesse Sierks; 29.03.2016
comment
@m_david, какая альтернатива, если вы хотите, чтобы кнопка отображалась на вкладке, как показано на скрипке, но хотите избежать <button> внутри <a>? См. мой связанный с этим вопрос здесь: stackoverflow.com/questions/39403406/ - person PurpleVermont; 09.09.2016

arrow_upward
10
arrow_downward

Попробуйте поместить тег span внутри тега a:

<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>
person zuluk    schedule 07.08.2013
comment
Проблема в том, что даже если кнопка закрытия была нажата, событие отправляется тегу ‹a›, потому что он также нажат. - person Ilan Biala; 19.01.2014
comment
event.preventDefault()должен заняться этим делом. - person zuluk; 20.01.2014
comment
да, я знаю, я просто говорю, что есть кое-что, на что следует обратить внимание, и просто не return false;, потому что это делает другие вещи в дополнение к предотвращению действий по умолчанию. - person Ilan Biala; 22.01.2014
comment
Я использовал это решение, но event.preventDefault() был не тем, что мне было нужно: чтобы остановить родительский тег <a>, регистрирующий событие, мне пришлось использовать event.stopPropagation(). - person Alessandro; 02.06.2019

arrow_upward
0
arrow_downward

Небольшие изменения в ответе Винода Луи - относительная ссылка на список 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));

Or:

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