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 相关文章推荐
javascript学习网址备忘
May 29 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
jquery常用操作小结
Jul 21 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
JavaScript实例 ODO List分析
Jan 22 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&amp;mysql(六)
2006/10/09 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python中有几个关键字
2020/06/04 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
美术指导求职信
2014/03/17 职场文书
合作协议书范文
2014/08/20 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript