全面解析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 相关文章推荐
jquery 应用代码 方便的排序功能
Feb 06 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP源码之explode使用说明
2011/08/05 PHP
探讨php中header的用法详解
2013/06/07 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
js实现随机数小游戏
2019/06/28 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python版学生管理系统
2018/01/10 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
中专毕业生个人职业生涯规划
2014/02/19 职场文书
2014中考励志标语
2014/06/05 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
施工安全协议书范本
2014/09/26 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
旷课检讨书范文
2015/01/27 职场文书