浅谈bootstrap源码分析之tab(选项卡)
更新时间：2016年06月06日 09:18:45 投稿：jingxian
下面小编就为大家带来一篇浅谈bootstrap源码分析之tab(选项卡)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实现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属性来实现部分重绘
以上这篇浅谈bootstrap源码分析之tab(选项卡)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS简单添加元素新节点的方法,结合实例形式分析了javascript针对页面元素节点的创建、添加、克隆等相关操作技巧,需要的朋友可以参考下2018-02-02
使用javascript实现ListBox左右全选,单选,多选,全请
使用javascript实现ListBox左右全选,单选,多选,全请。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用2013-05-05
js 限制input只能输入数字小数点也不能输入或者是只能输入数字,能输小数点等等，本文大致整理了一些，感兴趣的朋友可以收藏下2013-12-12
在 javascript 中有很多方式来创建对象，所以创建对象的方式使用起来非常灵活，到底哪一种方式是最恰当呢？下面为大家讲讲2013-08-08
如果我们需要比较两个数组是否相等，不能像比较基本类型(String、Number、Boolean等)一样，使用 === (或 ==) 来判断，所以如果要比较数组是否相等，需要使用一些特殊方法。本文为大家整理了四种常见用法，需要的可以参考一下2023-02-02
Axios返回的是Promise对象,这意味着可以使用Promise的.then()、.catch()和.finally()方法来处理异步操作的结果,本文详细介绍了处理Axios返回Promise对象的几种常见方式,需要的朋友可以参考下2024-09-09
这篇文章主要为大家介绍了前端Token 组成及生成方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了在页面中输出当前客户端时间javascript实例代码的相关资料,需要的朋友可以参考下2016-03-03
一文了解JavaScript中call/apply/bind的使用
这篇文章主要介绍了一文了解JavaScript中call/apply/bind的使用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
最新评论