文档地址：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 读取文件流

    搬运自速学堂:https://www.sxt.cn/Java_jQuery_in_action/ten-iqtechnology.html JAVA中IO流体系: 四大IO抽象类 ·InputStre ...

  2. .netCore 简易Web 项目

    static async Task Main(string[] args) { var _httpListener = new HttpListener(); _httpListener.Prefix ...

  3. Lumen5.6使用JWT【最新教程】，亲身失败百次的总结

    一.前言 如果需要使用 Passport,可以参考在下之前的教程: 'Lumen5.4配置OAuth2.0[强迫症,就是要用最新版本的Lumen]' . 由于原作者文档的简洁性,同时 Lumen 下的 ...

  4. python urllib应用

    urlopen 爬取网页 爬取网页 read() 读取内容 read() , readline() ,readlines() , fileno() , close() :这些方法的使用方式与文件对象完 ...

  5. SQL SERVER-邮件配置

    存储发邮件 USE msdb GO EXEC sp_send_dbmail @profile_name = 'mail_pro', @recipients='Jinwei.chang@quantacn ...

  6. Android笔记（二十四） Android中的SeekBar（拖动条）

    拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块的位置来标识数值——而且拖动条允许用户拖动滑块来改变值,因此拖动条通常用于对系统的某种数值进行调节,比如调节音量等 ...

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

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

  8. seo域名选择

    1-1第一选域名: 1,简单好记,有意义. 2,后缀首选com 其次cn 1-2购买域名网站有 1,阿里云 2,godaddy 3 ,景安 购买是可以在这三个域名平台都看看价格有些不一样.(可以省钱) ...

  9. 剖析可执行文件ELF组成

    对比参考:剖析.o文件ELF组成 相比.o的ELF格式,有哪些变化? .rel.text和.rel.data消失了 为什么这两个节会消失? 链接器将各.o中同名的.text和.data节整合到一起时, ...

  10. 神奇搜索算法A*

    A* A*是一种启发式搜索算法,又叫最佳图搜索算法. 何谓启发式搜索? 众所周知,计算机在执行搜索算法时是没开上帝视角的.因此,在搜索时,往往显得盲目,把所有可能的状态全部遍历,这种搜索我们统称盲目搜 ...