Question

我想在引导标签中添加一个关闭图标，然后点击图标关闭标签。

我在下面尝试，但“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>

Answer 1

工作小提琴是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

});
 }

Answer 2

尝试将span-tag放在a-tag中：

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

如果您使用bootstrap，请包含如下图标：

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

Answer 3

对Vinod Louis答案的小调整 - <div ng-if="!login && !create" ng-include="'standard_header.html'"></div>列表的相对链接，如果是当前关闭的话，则只有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));

如何在引导程序选项卡中添加关闭图标？

3 个答案: