最近一个小项目需要用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. HTML——表单标签

    表单标签(掌握) 现实中的表单,类似我们去银行办理信用卡填写的单子. 如下图: 目的是为了收集用户信息. 在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单. 在HTML中,一个完 ...

  2. 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况

    背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...

  3. 39 Ubuntu下配置python的vscode开发环境

    0 引言 最近想在ubuntu下搞深度学习,首先配置了python的vscode开发环境.在配置python时,选择了Anaconda3.x,保证了其相对于系统python2.x的独立性.另外,vsc ...

  4. ETL详解

    ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...

  5. POJ2186-Tarjan-kosaraju-缩点

    目录 目录 思路: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 题意:传送门  原题目描述在最下面.  A认为B优秀,B认为C优秀,则A认为C优秀.问有多少个人被其他所有人 ...

  6. java排序算法之冒泡排序和快速排序

    总结一下Java排序算法,以便记忆. 各类排序的时间复杂度: 排序方法 时间复杂度(平均) 时间复杂度(最坏) 时间复杂度(最好) 空间复杂度 稳定性 复杂性 直接插入排序 O(n2)O(n2) O( ...

  7. Hadoop国内主要发行版本

    Hadoop主要版本 目前国内使用的不收费的Hadoop版本主要包括以下3个: Apache hadoop Cloudera的CDH Hortonworks版本(Hortonworks Data Pl ...

  8. python学习8—函数之高阶函数与内置函数

    python学习8—函数之高阶函数与内置函数 1. 高阶函数 a. map()函数 对第二个输入的参数进行第一个输入的参数指定的操作.map()函数的返回值是一个迭代器,只可以迭代一次,迭代过后会被释 ...

  9. sql 保存,性能高

    INSERT INTO TABLE( Id, Name) VALUES ( 4, 'A'), ( 5, 'P' ),( 6, 'U') ; INSERT INTO TABLE( Id, Name) S ...

  10. 2019-8-31-C#-如何写出一个不能被其他程序集继承的抽象类

    title author date CreateTime categories C# 如何写出一个不能被其他程序集继承的抽象类 lindexi 2019-08-31 16:55:58 +0800 20 ...