全面解析Bootstrap中tab（选项卡）的使用方法
作者：lijiao 发布时间：2024-05-03 15:03:48
标签：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学习教程
Bootstrap实战教程
Bootstrap插件使用教程
本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。
0
投稿猜你喜欢
- 我的原数据库是3.23版本的.前几天因为一个论坛转移.必须用5.1的.于是就是升级了数据库.论坛是正常的.可以是原来的一个老库因为是3.23
- 在此之前，我写了两篇关于ASP结合XML的贴子，分别介绍了用XML取代数据库和用XML整合数据库这两方面的技术，让数据库在某种情况下不再是我
- 现有问题当前的项目中包括一个6200万行、500多列的表。其中的数据来自SQL Server以外，它们到达的表中有一个标识主键，所有剩下的列
- 方式一: os.fork()# -*- coding:utf-8 -*-"""pid=os.fork() &n
- 本文实例介绍了python实现井字棋游戏的方法，分享给大家，具体内容如下windows7下python3.4.0编译运行通过。由于采用了cm
Mysql查看是否使用到索引mysql数据库创建索引优化之后，在查询时想看下是否使用到索引，使用执行计划查看：mysql> expla- 本文给大家分享的是查看MySQL连接的root密码的方法，下面话不多说来来看正文：1.首先我们进到MySQL的bin目录下➜ cd /usr
- 导言作为web开发人员，我们的生活围绕着数据操作。我们建立数据库来存储数据，写编码来访问和修改数据，设计网页来采集和汇总数据。本文是研究在A
- 注：本文的所有数据请移步—— 参考数据一、水平堆叠图堆叠图其实就是柱状图的一种特殊形式fr
- 本文实例讲述了javascript常见数字进制转换的方法。分享给大家供大家参考，具体如下：基本思路是先把其他进制的转化成 十进制，然后再转化
- 一、卷积神经网络的概述卷积神经网络（ConvolutionalNeural Network，CNN）最初是为解决图像识别等问题设计的，CNN
- 1、Python的内置高阶函数1.1 map()map()会根据提供的函数对指定序列做映射语法格式：map(function, iterab
- 目录前言filestools库介绍一行代码给图片加水印总结前言版权相当重要，对于某张图片，可能是你精心制作的思维导图，或者你精心设计的某个l
- Pandas是Python中非常常用的数据处理工具，使用起来非常方便。它建立在NumPy数组结构之上，所以它的很多操作通过NumPy或者Pa
- 这个教程，我们将展示如何用python创建一个井字游戏。 其中我们将使用函数、数组、if条件语句、while循环语句和错误捕获等
- 一、requests库1、requests简介requests库就是一个发起请求的第三方库，requests允许你发送HTTP/1.1 请求
- 作为微软推出的网页与数据库解决方案，ASP由于有微软得天独厚的操作系统等技术后盾支持，因此得到了迅速的发展，并且正受到越来越多的欢迎，在目前
- 1. 算法描述二分法是一种效率比较高的搜索方法回忆之前做过的猜数字的小游戏，预先给定一个小于100的正整数x，让你猜猜测过程中给予大小判断的
- 概述在开发中，可能会遇到当页面滚动停止之后执行某些操作的需求。在 scrollend 事件之前，并没有可靠的方法来检测页面滚动是否完成。这意
- 今天偶尔在知乎上看到某大佬用Python写的ATM系统案例，然后观摩了下他的实现思路和源码，感觉受益颇多，于是就根据自己的思路和目前掌握的P
