文档地址：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想对应   (其它的照搬即可)

原理解析：

当显示一个新标签时，事件按如下顺序触发:

  1. hide.bs.tab (老选项卡隐藏之前)
  2. show.bs.tab (新选项卡显示之前)
  3. hidden.bs.tab(老选项卡隐藏之后)
  4. 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切换的使用的更多相关文章

  1. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  2. bootStrap中Tab页签切换

    关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab&q ...

  3. bootstrap标签tab切换

    <ul class="nav nav-tabs" id="myTab"> <li class="active">&l ...

  4. 当chart图遇上bootstrap的TAB切换 无宽高问题？

    .tab-content > .tab-pane, .pill-content > .pill-pane {    display: block; /* undo display:none ...

  5. 关于在bootstrap的tab栏中渲染echats图表，切换tab时echats不显示问题

    在开发过程中遇到这样个问题: 利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示. 其html代码为: < ...

  6. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  7. bootstrap的tab中，echarts 图表宽度设为100%之后，会出现图表宽带变为100px的情况。只有第一个正常

    1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...

  8. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  9. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

随机推荐

  1. BSGS和EXBSGS

    也许更好的阅读体验 \(Description\) 给定\(a,b,p\),求一个\(x\)使其满足\(a^x\equiv b\ \left(mod\ p\right)\) \(BSGS\) \(BS ...

  2. js中__proto__和prototype的区别和关系？（转）

    转自知乎:https://www.zhihu.com/question/34183746

  3. 解决阿里云OSS The requested bucket name is not available的办法

    今天在创建Bucket的时候遇到了这个问题 The requested bucket name is not available. The bucket namespace is shared by ...

  4. vue+axios通过formdata提交参数和上传文件

    demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.m ...

  5. 在Eclipse配置Tomcat服务器+JSP实例创建

    欢迎任何形式的转载,但请务必注明出处. 1.jdk安装及环境配置 点击进入教程 2.Eclipse安装 点击进入官网下载 注意下载完成打开.exe后,出现的界面,有很多版本供选择.选择下图版本 3.T ...

  6. ReactNative真机运行

    前提条件:USB 调试 你需要开启 USB 调试才能在你的设备上安装你的 APP. 首先,确定你已经打开设备的 USB 调试开关 确保你的设备已经成功连接.可以输入adb devices来查看: $ ...

  7. wampserver的使用配置

    1.正常安装就不说了,只需要把安装位置改成需要的位置就可以了.其它的默认就可以了. 2.安装完成之后打开wampserver. 3.现在该修改密码了: (1)点击进入mysql控制台. (2)Wamp ...

  8. PimaIndiansdiabetes-数据预处理实验（一）

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10859517.html 链接:https:// ...

  9. linux reboot ,shutdown,halt区别

    reboot ,shutdown,halt区别 重启   reboot  和 shutdown -r now  效果是一样的都是重启 区别在于reboot 是重启时,删除所有的进程,为不是平稳的终止他 ...

  10. C++——多态实现原理分析

    前言 虚函数执行速度要稍慢一些.为了实现多态性,每一个派生类中均要保存相应虚函数的入口地址表,函数的调用机制也是间接实现.所以多态性总是要付出一定代价,但通用性是一个更高的目标. 实验环境 Windo ...