最近一个小项目需要用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. thinkphp 域名部署

    ThinkPHP支持模块(甚至可以包含控制器)的完整域名.子域名和IP部署功能,让你的模块变得更加灵活,模块绑定到域名或者IP后,URL地址中的模块名称就可以省略了,所以还可以起到简化URL的作用. ...

  2. Python内置的一个用于命令项选项与参数解析的模块argparse

    一.argparse简单使用 我们先来看一个简单示例.主要有三个步骤: 创建 ArgumentParser() 对象 调用 add_argument() 方法添加参数 使用 parse_args() ...

  3. NX二次开发-输入X向量Y向量输出一个3*3矩阵UF_MTX3_initialize

    NX9+VS2012 #include <uf.h> #include <uf_csys.h> #include <uf_mtx.h> UF_initialize( ...

  4. 关于C++里set_intersection（取集合交集）、set_union（取集合并集）、set_difference（取集合差集）等函数的使用总结

    文章转载自https://blog.csdn.net/zangker/article/details/22984803 set里面有set_intersection(取集合交集).set_union( ...

  5. CSS3：CSS3 渐变（Gradients）

    ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...

  6. class8_Canvas 画布

    最终的部分运行效果图(程序见序号4): #!/usr/bin/env python# -*- coding:utf-8 -*-# ----------------------------------- ...

  7. sift-高斯金字塔

    一.高斯金字塔 金字塔的层是由降采样得到的,而每一层又有多张图像,其他的图像是由初始的一张经过高斯模糊的得到的. 注意的是:高斯金字塔有层,而金字塔的每一层有一组图像,这一组图像也形成了层.注意两个层 ...

  8. 2019-2020 ACM-ICPC Latin American Regional Programming Contest

    代码见:戳 easy: EIM medium-easy: BDFKL medium: ACJ medium-hard: H A - Algorithm Teaching 题意 给一些集合,现从每个集合 ...

  9. 在npm中使用bower包依赖工具

    什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和 ...

  10. JS对象 字符串分割 split() 方法将字符串分割为字符串数组，并返回此数组。 语法： stringObject.split(separator,limit)

    字符串分割split() 知识讲解: split() 方法将字符串分割为字符串数组,并返回此数组. 语法: stringObject.split(separator,limit) 参数说明: 注意:如 ...