最近一个小项目需要用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. JavaWeb学习篇之----Tomcat中配置数字证书以及网络传输数据中的密码学知识

    今天是学习JavaWeb的第二天,我们来了解什么呢?就了解一下Tomcat中配置数字证书的相关内容,但是在说这部分内容的时候,我们貌似得先说一下数字证书的相关概念,那说到数字证书的时候我们还得了解一些 ...

  2. NOIp2018集训test-9-2(pm)

    其实这套题我爆0了,T1define 写成ddefine编译错误 T2有两个变量爆int 但是我看zwh不在悄悄地改了,我心里还是十分愧疚(没有)的.主要是林巨已经虐我125了要是再虐我200分我大概 ...

  3. NX二次开发-UFUN读取表格注释内容UF_TABNOT_ask_cell_text

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_tabnot.h> #include < ...

  4. cordova 与 phonegap关系

    Apache Cordova是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎.PhoneGap是一个开源的开发框架,使用HTML ...

  5. AdaBoost笔记之原理

    转自:https://www.cnblogs.com/ScorpioLu/p/8295990.html 一.Boosting提升算法 AdaBoost是典型的Boosting算法,属于Boosting ...

  6. ionic-CSS：ionic 按钮

    ylbtech-ionic-CSS:ionic 按钮 1.返回顶部 1. onic 按钮 按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式. 默认情况下,按钮显示样式为:dis ...

  7. IAsyncResult

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. C不同变量类型存储大小引发的BUG

    #include"stdio.h" typedef signed char int8; typedef unsigned char uint8; typedef signed sh ...

  9. windows下怎么给ubantu虚拟机全屏的处理

    ubantu版本时16.04 windows下窗口太小需要设置 相信很多人在装虚拟机的时候,遇到了窗口过小不能自适应的问题.我也是查了好多资料,都说安装Vmware Tools即可解决,还有说修改分辨 ...

  10. java排序及泛型

    一.用泛型实现快排,可以传入不通类型进行排序,比如String数组,Integer数组. /** * 快速排序 * * @author chx * */ public class QuickSort ...