全面解析Bootstrap中tab(选项卡)的使用方法
作者:lijiao 时间:2024-05-03 15:03:48
本文实例为大家介绍实现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学习教程
Bootstrap实战教程
Bootstrap插件使用教程
本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。
标签:Bootstrap,tab,选项卡
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python函数中4种参数的使用教程
2023-03-06 23:06:03
Python中使用MELIAE分析程序内存占用实例
2021-10-26 22:34:24
Linux下修改MySQL编码的方法
2024-01-27 02:36:15
![](https://img.aspxhome.com/file/2023/2/112892_0s.jpg)
详解SQL游标的用法
2024-01-18 02:41:30
![](https://img.aspxhome.com/file/2023/2/105462_0s.png)
Oracle数据库索引的维护
2010-07-26 13:29:00
Python+matplotlib实现堆叠图的绘制
2023-07-21 17:38:35
![](https://img.aspxhome.com/file/2023/2/61182_0s.png)
基于Python实现下载网易音乐代码实例
2023-05-25 01:05:51
![](https://img.aspxhome.com/file/2023/0/105420_0s.png)
一文带你搞懂Python上下文管理器
2022-11-26 05:15:50
基于element-ui中el-select下拉框选项过多的优化方案
2023-07-02 17:00:50
![](https://img.aspxhome.com/file/2023/7/139887_0s.png)
Window10上Tensorflow的安装(CPU和GPU版本)
2021-05-13 19:18:37
![](https://img.aspxhome.com/file/2023/9/131649_0s.jpg)
python做图片搜索引擎并保存到本地详情
2021-08-27 01:42:33
![](https://img.aspxhome.com/file/2023/2/66842_0s.png)
在MySQL数据库中如何修改密码及访问限制
2008-11-27 16:36:00
Python多个MP4合成视频的实现方法
2021-02-21 13:50:44
python urllib爬取百度云连接的实例代码
2022-03-07 19:06:28
![](https://img.aspxhome.com/file/2023/0/93850_0s.png)
Go语言编程中判断文件是否存在是创建目录的方法
2024-05-21 10:22:02
Pytorch生成随机数Tensor的方法汇总
2022-11-03 19:39:18
python flask开发的简单基金查询工具
2023-10-29 21:35:42
![](https://img.aspxhome.com/file/2023/0/66800_0s.png)
Python flask路由间传递变量实例详解
2021-03-13 16:30:16
![](https://img.aspxhome.com/file/2023/9/124309_0s.png)
php+ajax+h5实现图片上传功能
2024-05-22 10:05:39
python中的load、loads实现反序列化示列
2023-04-01 23:49:56