全面解析Bootstrap中tab（选项卡）的使用方法
更新时间：2016年06月06日 08:56:04 投稿：lijiao
这篇文章主要为大家全面解析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属性来实现部分重绘
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
相关文章
es6数组的flat()，flatMap()函数用法实例分析
这篇文章主要介绍了es6数组的flat()，flatMap()函数用法,结合实例形式分析了es6数组的flat()，flatMap()函数基本功能、使用方法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript简单遍历DOM对象所有属性的实现方法,涉及JavaScript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
使用typeof方法，typeof 返回的是字符串,其中就有一个是undefined，下面是示例代码，大家可以看看2014-09-09
本文为大家介绍下jsPDF生成pdf后如何在网页展示，下面有个不错示例，大家可以参考下2014-01-01
这篇文章主要为大家详细介绍了js+css实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在使用Element Plus官方API时,表格默认排序可能会遇到问题,一个列表可能被多次排序影响数据展示,解决方法是修改useSortTable.js文件,这样可以确保表格按预期正确排序,更多详情可查阅相关的技术文档或资源2024-10-10
这篇文章主要介绍了JavaScript获取当前时间向前推三个月的方法,结合实例形式分析了javascript日期与时间运算相关操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JS实现加载时锁定HTML页面元素的方法,涉及javascript针对页面元素的遍历与属性操作相关实现技巧,需要的朋友可以参考下2017-06-06
el-popover放在el-table中点击无反应问题解决方案
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应,解决思路是通过给每个el-popover都加上单独的id,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-04-04
这篇文章主要介绍了phantomjs导出html到pdf的方法总结,需要的朋友可以参考下2017-10-10
最新评论