先给出示例html代码

<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>
&nbsp;<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">&times;</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事件

在此基础上,可以实现各种场景下的应用。

Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页的更多相关文章

  1. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  2. Bootstrap入门(十二)组件6:导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

  3. Bootstrap(7) 输入框和导航组件

            一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. //在左侧添加文字 <!-- //在左侧添加文字 --> ...

  4. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  5. Bootstrap导航组件

    Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页 注意 .nav-tabs 类依赖 .nav 基类 <ul class=" ...

  6. Bootstrap 输入框和导航组件

    一.输入框组件 //在左侧添加文字 <div class="input-group"> <span class="input-group-addon&q ...

  7. Bootstrap 学习笔记3 输入框和导航组件

    导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...

  8. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  9. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

随机推荐

  1. 自定义cell时,在宽的手机上显示太窄解决办法

    1.工程设置要如下:见第二个红框,清除launch screan file 后面的内容 2.自定义的cell要设置auto layout 和size clases

  2. C# Socket select模型

    http://www.cnblogs.com/Clingingboy/archive/2011/07/04/2097806.html http://www.cnblogs.com/RascallySn ...

  3. grawlew 编译

    http://somefuture.iteye.com/blog/2002052 Gradlew behind a proxy systemProp.http.proxyHost=www.someho ...

  4. android获取系统wifi状态等

    WIFI 获取WIFI状态 WifiManager wifiManager = (WifiManager)context.getSystemService(Context.WIFI_SERVICE); ...

  5. PIGS(最大流)

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18742   Accepted: 8511 Description ...

  6. Android显示GIF动画完整示例(二)

    MainActivity如下: package cc.testgif2; import android.os.Bundle; import android.app.Activity; /** * De ...

  7. iOS中的图像处理(三)——混合运算

    有时候,单独对一张图像进行处理是很难或者根本达不到我们想要的效果的.一个好的滤镜效果的诞生,往往要经过很多复杂步骤.细致微调.图片应用效果观察以及很多图层叠加. 我在JSWidget上发现了一些常用混 ...

  8. HDU 5045 Contest(状压DP)

    Problem Description In the ACM International Collegiate Programming Contest, each team consist of th ...

  9. ListView.MultiChoiceModeListener

    参考:http://www.cnblogs.com/a284628487/p/3460400.html和http://blog.csdn.net/mayingcai1987/article/detai ...

  10. 【Nginx】启动报错-端口被占用

    将下载的windows版nginx的压缩包nginx-1.4.2.zip解压到F:\server\nginx-1.4.2里面. dos命令键入: F: cd F:\server\nginx-1.4.2 ...