全面解析Bootstrap中tab(选项卡)的使用方法


Posted in Javascript onJune 06, 2016

本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下

源码文件:

tab.js

实现原理:

1、单击一个元素时,首先将原来高亮的元素取消
2、然后给被单击元素进行高亮
3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框
5、如果定义了动画,先执行动画,然后回调

源码分析:

1、Show方法,是在单击一个元素的时候触发,会触发如下四个事件

  1.1、Hiden.bs.tab:隐藏上一个元素
  1.2、Show.bs.tab:显示当前元素
  1.3、Hideen.bs.tab:隐藏上一个元素完成
  1.4、Shown.bs.tab:显示当前元素完成
  1.5、Hiden/show事件源码:

var $previous = $ul.find('.active:last a')
 var hideEvent = $.Event('hide.bs.tab', {
 relatedTarget: $this[0]
 })
 var showEvent = $.Event('show.bs.tab', {
 relatedTarget: $previous[0]
})

2、Active:激活当前对象

  2.1、对导航元素增加aria-expanded属性,标记此元素是否处于展开状态
  2.2、利用reflow机制,用获取offsetWidth属性来实现部分重绘

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 #Javascript
JavaScript 数组中最大最小值
Jun 05 #Javascript
使用three.js 画渐变的直线
Jun 05 #Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
jQuery四种选择器使用及示例
Jun 05 #Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 #Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JS实现新建文件夹功能
2017/06/17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
什么造成了Java里面的异常
2016/04/24 面试题
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
公司领导推荐信
2013/11/12 职场文书
实习介绍信模板
2015/01/30 职场文书
药店收银员岗位职责
2015/04/07 职场文书
nginx优化的六点方法
2021/03/31 Servers
python3 删除所有自定义变量的操作
2021/04/08 Python
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB