文档地址：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. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...

  2. C#进阶系列——WebApi异常处理解决方案

    阅读目录 一.使用异常筛选器捕获所有异常 二.HttpResponseException自定义异常信息 三.返回HttpError 四.总结 正文 为什么说是实践?因为在http://www.asp. ...

  3. php 跳转页面

    header('location:./example.php'); header('refresh:2;url=./example.php');

  4. shell 学习笔记8-case条件语句

    一.case语句简介 1.什么是case条件语句 case条件语句就相当于多分支的if/elif/else条件语句,但是比这样的语句更规范更好看,经常被用在失效系统服务启动脚本等企业应用中 程序将ca ...

  5. Centos7+puppet+foreman,模板介绍

    一.简介 provision templates 是灵活部署合适的操作系统的核心,模板包括有好几类 1.模板种类 pxe相关的模板,比如pxelinux,pxegrub,pxegrub2 kickst ...

  6. Python-demo(抖音)

    # -*- coding:utf-8 -*- from mitmproxy import ctx import json import requests import time import os p ...

  7. 微信开发者工具 关于no such file or directory

    在新建页面中,保存后弹出 “ no such file or directory ” 错误 原因是打开了一个文件,然后在目录树中删除了它,但是这个被删除的页面依旧在打开状态,开发者工具在编译保存时由于 ...

  8. VUe键盘修饰符及自定义指令获取焦点

    首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...

  9. [#Linux] CentOS 7 美化调优

    优化美化系统,是为了让新系统能更顺眼顺手,符合自己过去在windows下的使用习惯,从而实现平稳过渡. 正如开篇时谈到的,现在的桌面版linux已相当友好(特别是Ubuntu),基本不需要做什么额外设 ...

  10. [#Linux] CentOS 7 禁用笔记本的触摸板

    安装 xorg-x11-apps yum install xorg-x11-apps 查看对应设备的 id xinput –list 关闭 touchpad xinput set-int-prop 1 ...