如何在bootstrap选项卡中添加关闭图标？
如何在bootstrap选项卡中添加关闭图标？
提问于 2013-08-07 15:03:40
我想在引导选项卡中添加一个关闭图标，然后我可以通过单击该图标来关闭该选项卡。
我在下面尝试，但"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>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-07 15:10:01
有效的工具是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
});
}Stack Overflow用户
发布于 2013-08-07 15:15:17
尝试将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>Stack Overflow用户
发布于 2016-05-29 10:16:38
对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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18096724
复制相关文章
相似问题