全面解析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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
手机号码,密码正则验证
Sep 04 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
JS跨域问题详解
2014/11/25 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
python中xlutils库用法浅析
2020/12/29 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
经典英文广告词
2014/03/18 职场文书
开学典礼主持词
2014/03/19 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
消防工作实施方案
2014/06/09 职场文书
服务明星事迹材料
2014/12/29 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python