最近一个小项目需要用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. Dart编程变量

    变量是"存储器中的命名空间",用于存储值.换句话说,它作为程序中值的容器.变量名称称为标识符.以下是标识符的命名规则 - 标识符不能是关键字. 标识符可以包含字母和数字. 标识符不 ...

  2. JZOJ5143:无心行挽

    Description “What’s left to do when we’ve lost all hope?”“若内心万念俱灰,是否注定无心行挽?”------来自网易云音乐<Golden ...

  3. 兼容火狐浏览器的select下拉框样式

    经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟 ...

  4. HAOI 2006 受欢迎的牛 （洛谷2341）

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的"喜欢"是可以传递的--如果A喜 欢B,B喜 ...

  5. 数学相关比较 牛顿迭代法求开方 很多个n的平方分之一

    牛顿迭代法求开方 牛顿迭代法 作用: 求f(x) = 0 的解 方法:假设任意一点 x0, 求切线与x轴交点坐标x1, 再求切线与x轴交点坐标x2,一直重复,直到f(xn) 与0的差距在一个极小的范围 ...

  6. 关于resin的一个错误，Resin 启动报错，访问页面500

    背景 客户集成javaagent报错,客户用的是resin,在本地复现问题,修改了bug,其中在resin中发布war包遇到的错误. 完整错误 500 [show] WEB-INF/web.xml:5 ...

  7. XStream入门应用程序

    在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...

  8. servlet的xml配置详解

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns ...

  9. 如何优雅的使用Objects.requireNonNull(T obj, String message)定制你的NPE异常

    IDEA中习惯跟踪源码实现逻辑,多次碰到Objects.requireNonNull(T obj)这个方法,改方法主要用于提早判断对象是否为空,以便更早的抛出NPE 平时小组开发中强调程序健壮性,不允 ...

  10. 我写的界面，在ARM上跑

    这个...其实,我对ARM了解并不多,我顶多也就算是知道ARM怎么玩,EMMC干啥,MMU干啥,还有早期的叫法,比如那个NorFlash NandFlash ,然后也就没啥了. 然后写个裸机什么的,那 ...