本文介绍了如何在引导选项卡中添加关闭图标?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要在引导标签中添加关闭图标,然后点击图标关闭标签。
I want to add a close icon in bootstrap tabs and then I can close the tab by click the icon.
我尝试下面但是显示X不与选项卡标题在同一行。
I try below but the "X" is displayed not on the same line as tab title.
.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>
推荐答案
//jsfiddle.net/vinodlouis/pb6EM/1/\">这里
the working fiddle is 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
});
}
这篇关于如何在引导选项卡中添加关闭图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!