文档地址：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. Redis 如何与数据库事务保持一致

    考虑一个问题,redis 如何 与 数据库保持一致性的问题. 举栗子:如果我们在开发过程中遇到这样的一种情况,我们删除 redis中token 的同时 也需要修改数据库中 储存的 token 的状态为 ...

  2. collections.defaultdict()的使用

    这里的defaultdict(function_factory)构建的是一个类似dictionary的对象,其中keys的值,自行确定赋值,但是values的类型,是function_factory的 ...

  3. SQL Server2008导入导出数据库

    一.导出数据库 1.新建一个.bak的文本 右击数据库-->Tasks-->BackUp-->Remove原来的数据库-->Add后选择之前建立的.bak档 二.导入数据库 1 ...

  4. cocos动画没有cc.Sprite.spriteFrame属性

    对于新人来说总是有那么多的坑等着你. 新建动画节点的时候千万别[新建空节点]!!! 上面这个就是新建了空的节点,导致没有cc.Sprite.spriteFrame属性. 正确姿势: 粗略试了一下除了空 ...

  5. Thymeleaf 模板

    Thymeleaf 模板布局 th:fragment.th:replace.th:insert.th:remove th:fragment  模板布局 模板片段说明 模板中,经常希望从其他模板中包含⼀ ...

  6. java网络编程--httpurlconnection

    HttpURLConnection是基于HTTP协议的,其底层通过socket通信实现.如果不设置超时(timeout),在网络异常的情况下,可能会导致程序僵死而不继续往下执行.可以通过以下两个语句来 ...

  7. Python中@staticmethod和@classmethod的作用和区别

    简单介绍一下两者的区别: 对于一般的函数test(x),它跟类和类的实例没有任何关系,直接调用test(x)即可 #!/usr/bin/python # -*- coding:utf-8 -*- de ...

  8. django操作mysql

    连接mysql 1.安装pymysql 操作指令 : pymsql: pip install pymysql 2.导入库 在项目目录下的__init__.py文件中导入pymysql模块 加入以下两行 ...

  9. 二：MySQL系列之SQL基本操作（二）

    本篇主要介绍SOL语句的基本操作,主要有分为 连接数据库,创建数据库.创建数据表.添加数据记录,基本的查询功能等操作. 一.针对数据库的操作 -- 1.连接数据库 mysql -uroot -p my ...

  10. Python基础Day5

    一.字典 ①字典是python的基础数据类型之一 ②字典可以存储大量的数据,关系型数据 ③字典也是python中唯一的映射类的数据类型 字典是以键值对的形式存在的,{键:值} 字典的键必须是不可变的数 ...