BootStrap tab选项卡使用小结


Posted in Javascript onAugust 09, 2020

选项卡

选项卡的基本使用方式为:

<ul class="nav nav-tabs">
 <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li>
 <li><a href="#" data-target="#tab2" data-toggle="tab">tab2</a></li>
 <li><a href="#" data-target="#tab3" data-toggle="tab">tab3</a></li>
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="tab1">11111</div>
 <div class="tab-pane" id="tab2">22222</div>
 <div class="tab-pane" id="tab3">33333</div>
</div>

选项卡使用分别标签和具体内容,这两个可以不放在一起但是一定要同时存在。

选项卡标签的关键属性为data-target="ele",data-toggle="tab",data-target="ele"表示该标签对应的具体内容,data-toggle="tab"提供了HTML触发条件,这两个属性就可以完成选项卡的标签功能,但是如果不按照上面的嵌套结构直接使用这两个属性的话,会缺少高亮样式需要我们自己实现。

具体内容为了避免不必要的问题我们要按照上面的结构进行编写,tab-pane作为tab-content的内元素才可以进行显示隐藏,class="tab-pane"元素要和标签的data-target互相对应,如果data-target设置为data-target="#demo"则内容元素上要设置id="demo",active表示高亮样式,标识出当前显示的标签。

如果需要动画在tab-pane后面添加fade即可

标签的高亮类样式要设置在li元素上

JS使用

选项卡在使用JS进行调用时直接在标签元素上绑定事件即可,选项卡只提供了一个现实的参数"show",可以通过JS来选中某一个标签,一定是在标签元素上绑定事件。

使用方式为:

$("ele").tab("show")

选项卡提供了两个事件,事件同样要绑定在标签元素上:

1.show.bs.tab在tab显示之前触发

2.shown.bs.tab在tab显示之后触发

如果没有在class="tab-pane"上设置动画,两个事件其实没什么区别,如果设置了动画show.bs.tab在tab显示以前触发,shown.bs.tab在动画完成之后触发。

在这两个事件的事件对象中提供了两个属性分别为e.target和e.relatedTarget,分别为当前点击的tab以及前一个tab。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
学习ExtJS border布局
Oct 08 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 #Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 #Javascript
BootStrap modal模态弹窗使用小结
Oct 26 #Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 #Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
You might like
php像数组一样存取和修改字符串字符
2014/03/21 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Python 除法小技巧
2008/09/06 Python
Python中操作MySQL入门实例
2015/02/08 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python实现图片批量压缩程序
2018/07/23 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python db类用法说明
2020/07/07 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
大型活动组织方案
2014/05/10 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang