bootstrap中tab切换的使用
文档地址：https://v3.bootcss.com/javascript/#tabs
简单实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab切换</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div> <!-- 导航 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul> <!-- 对应内容 -->
<!-- <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div> --> <!-- 带显示效果的内容 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">1</div>
<div role="tabpanel" class="tab-pane fade" id="profile">2</div>
<div role="tabpanel" class="tab-pane fade" id="messages">3</div>
<div role="tabpanel" class="tab-pane fade" id="settings">4</div>
</div>
</div>
</body>
</html>
上方每个导航中的a标签的href属性值应该和内容的id想对应 (其它的照搬即可)
原理解析：
当显示一个新标签时，事件按如下顺序触发:
hide.bs.tab(老选项卡隐藏之前)show.bs.tab(新选项卡显示之前)hidden.bs.tab(老选项卡隐藏之后)shown.bs.tab(新选项卡显示以后)
如果没有标签页已经激活，那么隐藏。bs。taband hidden.bs。不会触发tabevents。
| 事件类型 | 描述 |
|---|---|
| show.bs.tab | 此事件在显示新选项卡之前触发。使用event.targetandevent。relatedtargeto分别针对活动选项卡和前一个活动选项卡(如果可用)。 |
| shown.bs.tab | 此事件在选项卡显示后触发选项卡显示。使用event.targetandevent。relatedtargeto分别针对活动选项卡和前一个活动选项卡(如果可用)。 |
| hide.bs.tab | 当要显示新选项卡时(因此要隐藏先前的活动选项卡)，此事件将触发。Useevent。目标的事件。relatedtargeto分别针对当前活动选项卡和即将活动的新选项卡。 |
| hidden.bs.tab | 此事件在显示新选项卡之后触发(因此前一个活动选项卡被隐藏)。Useevent。目标的事件。relatedtargeto分别针对前一个活动选项卡和新活动选项卡。 |
使用实例：
$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
// e.target // 新选项卡对象
// e.relatedTarget // 老选项卡对象
console.log("老选项卡隐藏之前");
})
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// e.target // 新选项卡对象
// e.relatedTarget // 老选项卡对象
console.log("新选项卡显示之前");
})
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
// e.target // 新选项卡对象
// e.relatedTarget // 老选项卡对象
console.log("老选项卡隐藏之后");
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.nodeName);//获取事件触发元素标签名（li，p，div，img，button…）
console.log(e.target.id);//获取事件触发元素id
console.log(e.target.className);//获取事件触发元素classname
console.log(e.target.innerHTML);//获取事件触发元素的内容（li）
console.log(e.relatedTarget) // 老选项卡对象
console.log("新选项卡显示之后");
})
</script>
初始化时是不会执行上面的事件的
bootstrap中tab切换的使用的更多相关文章
- jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- bootStrap中Tab页签切换
关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab&q ...
- bootstrap标签tab切换
<ul class="nav nav-tabs" id="myTab"> <li class="active">&l ...
- 当chart图遇上bootstrap的TAB切换 无宽高问题？
.tab-content > .tab-pane, .pill-content > .pill-pane { display: block; /* undo display:none ...
- 关于在bootstrap的tab栏中渲染echats图表，切换tab时echats不显示问题
在开发过程中遇到这样个问题: 利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示. 其html代码为: < ...
- bootstrap tab切换如何让鼠标移动自动切换内容
bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...
- bootstrap的tab中，echarts 图表宽度设为100%之后，会出现图表宽带变为100px的情况。只有第一个正常
1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...
- bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
随机推荐
- webpack css文件编译、自动添加前缀、剥离
1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中 npm i style-loader -D // css文件loader npm i ...
- Markdown笔记（git提交带有emoji的commit描述）
用法:> git commit -m ' :tada: initial ' emoji来源:> ,但是需要在刷新时只刷 ...
- MonkeyRunner——Mac
1. MonkeyRunner介绍: Android的SDK中集成了三个可用来进行自动化测试的工具:Monkey.MonkeyRunner和Robotium.这三个测试工具都是基于黑盒测试. Monk ...
- 7层网络以及5种Linux IO模型以及相应IO基础
一.七层网络模型 OSI是Open System Interconnection的缩写,意为开放式系统互联.国际标准化组织(ISO)制定了OSI模型,该模型定义了不同计算机互联的标准,它是一个七层的. ...
- ESLint——从零学起
介绍 ESLint最初是由Nicholas C. Zakas于2013年6月创建的开源项目.它的目标是提供一个插件化的javascript代码检测工具.因此,ESLint就是一个语法规则和代码风格的检 ...
- sql 四舍五入 保留两位小数
一.问题描述 数据库里的 float momey 类型,都会精确到多位小数.但有时候 我们不需要那么精确,例如,只精确到两位有效数字. 二.sqlserver解决方案: 1. 使用 Round() 函 ...