全面解析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 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
javascript实现拼图游戏
Jan 29 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框架性能测试报告
2016/05/08 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Angular.js中数组操作的方法教程
2017/07/31 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
linux面试题参考答案(11)
2012/05/01 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
网络教育自我鉴定
2014/02/04 职场文书
会计岗位描述
2014/02/22 职场文书
公司请假条范文
2014/04/11 职场文书
员工生日活动方案
2014/08/24 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
商铺门面租房协议书
2014/10/21 职场文书
师范生见习自我总结
2015/06/23 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python