最近一个小项目需要用Tab标签切换显示不同div内容，用到了Bootstrap里面的东西，但是在Bootstrap3教程里却没有找到对应的代码，这里记录一下，方便以后快速查阅学习。

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>测试</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

        <style>

            html,

            body {

                height: 100%;

                width: 100%;

                padding: 0px;

                margin: 0px;

                overflow: hidden;

            }

            .bg_main {

                height: 100%;

                width: 100%;

                background: gray;

                margin: 0 auto;

            }

            .bg_left {

                position: relative;

                top: 3.5%;

                left: 2.5%;

                float: left;

                width: 15%;

                height: 85%;

                background: #404040;

                color: white;

            }

            .bg_body {

                position: relative;

                top: 3.5%;

                left: 2.5%;

                float: left;

                width: 80%;

                height: 85%;

                background: green;

                color: white;

                display: flex;

                align-items: center;

                justify-content: center; 

            }

        </style>

    </head>

    <body>

        <div class="bg_main">

            <div class="bg_left">

                <ul class="nav nav-pills nav-stacked" style="width: 100%;">

                    <li class="active"><a href="#home" data-toggle="tab">检测1</a></li>

                    <li><a href="#profile" data-toggle="tab">检测2</a></li>

                    <li><a href="#haha" data-toggle="tab">检测3</a></li>

                </ul>

            </div>

            <div class="bg_body">

                <div class="tab-content" style="float: left; height: 90%;width: 90%; background: gray;">

                    <div class="tab-pane active" id="home">检测1内容 </div>

                    <div class="tab-pane" id="profile">检测2内容</div>

                    <div class="tab-pane" id="haha">检测3内容</div>

                </div>

            </div>

        </div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    </body>

</html>

运行效果：

Bootstrap——设置Tab标签切换的更多相关文章

  1. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  2. Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  3. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  4. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  5. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  6. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  7. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Swift - 分页菜单的实现（使用PagingMenuController库实现tab标签切换）

    分页菜单(分段菜单)在许多 App 上都会用到.比如大多数新闻 App,如网易新闻.今日头条等,顶部都有个导航菜单.这个导航菜单是一组标签的集合,每个标签表示一个新闻类别,我们点击这个标签后下面就会切 ...

  9. JavaScript CSS 实现简单的 TAB 标签切换

    使用CSS隐藏所有tab页,然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素,以此实现tab切换. 如鼠标放置到shwww时 ...

随机推荐

  1. lua执行的两种方式

    一.交互模式 二.脚本式 创建一个以lua结尾的文件,例如hello.lua文件内容 println("hello world")

  2. C++源文件的后缀名问题

    VC里用cpp作后缀名, 在GCC里默认采用C.cc.cxx作为后缀名 .cpp, .h (VS file).cc, .h (GCC file)   C中: 头文件后缀名: .h 源文件后缀名: .c ...

  3. Centos7.5安装mysql 8.0.11

    一．安装前准备 安装采用二进制包方式,软件包8.0.11版本下载地址: https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-linux-gl ...

  4. java 传入多个参数时报"Parameter 'XXX' not found. Available parameters are [arg1, arg0, param1,..." 解决方案

    @Select("SELECT id FROM ae_post ORDER BY id DESC LIMIT #{page},#{size}") List<Post> ...

  5. 【POJ】1502 MPI Maelstrom

    题目链接:http://poj.org/problem?id=1502 题意:一个处理器给n-1个处理器发送广播,问最短时间.广播时并发,也就是各个路径就大的一方.输入如果是x的话说明两个处理器不能相 ...

  6. kafka 入门

    李克华 云计算高级群: 292870151 195907286 交流:Hadoop.NoSQL.分布式.lucene.solr.nutch  kafka入门:简介.使用场景.设计原理.主要配置及集群搭 ...

  7. pandas中series求交集

    在进行数据探索的时候会遇到求交集的情况,比如说:优惠卷预测的时候,有多张表,表1有用户id,表2也有用户id,但是不能确定表1的用户有多少出现在表2当中. un_id1,un_id2 为两个 Seri ...

  8. 笔记：Python防止SQL注入

    非安全的方式,使用动态拼接SQL 输入' or 1 = 1 or '1 sql ="""SELECT * FROM goods WHERE name = '%s';&qu ...

  9. TFS 忽略 文件

    原文链接:http://ju.outofmemory.cn/entry/258689 让TFS忽略packages文件夹的更改 很多时候我们需要使用 Nuget 进行包管理,这时在我们的解决方案文件夹 ...

  10. 论文学习02-《On the Effectiveness of Visible Watermarks》

    I. Estimating the Matted Watermark 给定所有图像中的水印当前估计的区域,我们通过观察这些区域图像梯度的一致性来检测出水印梯度,也就是我们通过计算这些区域的图像梯度的中 ...