22

ブートストラップ タブに閉じるアイコンを追加したいので、アイコンをクリックしてタブを閉じることができます。

以下を試してみましたが、「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>
4

3 に答える 3

10

a-tag 内に span-tag を入れてみてください:

<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>
于 2013-08-07T07:15:16.523 に答える
0

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>
于 2016-05-29T02:16:38.010 に答える