文档地址：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. java -jar 参数前后位置说明

    springboot项目启动的时候可以直接使用java -jar xxx.jar这样.下面说说参数的一些讲究 1.-DpropName=propValue的形式携带,要放在-jar参数前面 eg:ja ...

  2. WCF header 域

    [OperationContract] [WebInvoke(UriTemplate = "poststr1")] public string poststr1(csinfo cs ...

  3. elasticsearch 开机自启

    linux下开机自启: 在/etc/init.d目录下新建文件elasticsearch 并敲入shell脚本: #!/bin/sh #chkconfig: #description: elastic ...

  4. c#基础知识梳理（一）

    一.C#简介 C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言.C#看起来与Java有着惊人的相似:它包括了诸如单一继承.接口.与Java几乎同样的语法和编 ...

  5. element-ui 文件上传

    <el-form-item> <el-upload ref="upload" class="upload-demo" :action=&quo ...

  6. Mac下多版本JDK安装及管理

    在Java项目中,经常对JDK版本有不同的要求,可是不可能为了某个项目的运行重新下载不同版本JDK进行安装,这样就涉及到对本地环境中多个JDK版本的管理. Mac的JDK都是安装到一个指定目录的:/L ...

  7. RestFramework之认证组件

    一.认证组件的介绍 对于认证,我们一般有三种方式,即cookie, session,token, cookie,是将信息存放在客户端(浏览器上),信息不安全: session,把信息放在服务器数据库中 ...

  8. uboot中setenv和saveenv分析

    转:https://blog.csdn.net/weixin_34355715/article/details/85751477 Env在u-boot中通常有两种存在方式,在永久性存储介质中(flas ...

  9. MySQL数据库语法-单表查询练习

    MySQL数据库语法-单表查询练习 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要是对聚合函数和分组的练习. 一.数据表和测试数据准备 /* @author :yinz ...

  10. Flask笔记（一）

    first_flask_project.py # 从flask这个包中导入Flask这个类 # Flask这个类是项目的核心,以后很多操作都是基于这个类的对象 # 注册url.注册蓝图等都是基于这个类 ...