<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="contentnavid">
<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>
<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>
<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>
<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>
</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>
<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>
<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>
<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>
</div>
</div>
上面的html代码中,显示的导航组件有4个tab页,其中最后一个tab页的标签的右边有一个 x 的关闭按钮。
下面我们要实现就是当点击x关闭按钮时,可以把这个带关闭按钮的tab隐藏掉,并显示最近一次显示的tab页。
具体示例代码如下:
<script>
var activeTab = "tab1"//当前的tab页。默认为第一个tab页。
var previousTab //上一个打开的tab页。默认为空。
$(function(){
//实现事件响应函数,当tab页被显示时会触发
$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {
//获取当前被显示的tab页标签的aria-controls属性值
activeTab = $(e.target).attr("aria-controls")
//获取前一个被显示的tab页标签的aria-controls属性值
previousTab = $(e.relatedTarget).attr("aria-controls")
})
//点击带关闭按钮tab页标签上的x后的响应事件
$("#closetabbtn").click(function(e){
$(this).parent().parent().css("display","none")//隐藏tab头,调用remove方法就是删除了
$("#closetab").css("display","none")//隐藏tab正文信息,调用remove方法就是删除了
if(activeTab=="closetab"){ //判断当前tab页是否是带关闭按钮的tab页,如果是,则显示上次打开的tab页
$(‘#contentnavid a[href="#‘+previousTab+‘"]‘).tab(‘show‘)//显示tab页
}
return false//一定要return false,阻止事件往上冒泡
})
})
</script>
上面给出了js代码。
本文给出了最核心的处理逻辑,其中关键的地方有:
1)增加关闭按钮,并处理click事件
2)处理tab的show事件
在此基础上,可以实现各种场景下的应用。
因为最近没时间研究这些框架,所以不能给你提供处理方法,但你可以加他们的QQ群:35881181,名字为edoJs(2),
现已改为miniui群,只是群名没改,我在这群有两年了。