最近一个小项目需要用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. python基础之异常处理

    Python3 错误和异常 作为Python初学者,在刚学习Python编程时,经常会看到一些报错信息,在前面我们没有提及,这章节我们会专门介绍. Python有两种错误很容易辨认:语法错误和异常. ...

  2. Android中SQLite应用详解

    上次我向大家介绍了SQLite的基本信息和使用过程,相信朋友们对SQLite已经有所了解了,那今天呢,我就和大家分享一下在Android中如何使用SQLite. 现在的主流移动设备像Android.i ...

  3. IIS 7完全攻略之日志记录配置(摘自网络)

    IIS 7完全攻略之日志记录配置 作者:泉之源 [IT168 专稿]除了 Windows 提供的日志记录功能外,IIS 7.0 还可以提供其他日志记录功能.例如,可以选择日志文件格式并指定要记录的请求 ...

  4. vector,arraylist, linkedlist的区别是什么

    LinkedList类 LinkedList实现了List接口,允许null元素. 此外LinkedList提供额外的get,remove,insert方法在LinkedList的首部或尾部. Lin ...

  5. wamp安装完更改关联浏览器

    "wampmanager.conf"文件修改的是关于中到官网的链接打开方式. "wampmanager.ini"修改的是左键菜单的打开方式. 修改完无效的话重启 ...

  6. \n ^ \t的使用

    \n是换行符: 使用时需要放在字符串里面,成为字符串的一部分(不要嫌乱,这是我之前犯的错误). 示例: >>>print("I am Guido \n what's yon ...

  7. WP_从独立存储区读取缓存的图片

      ///<summary> /// 独立存储缓存的图片源 /// 用法:item.img = new StorageCachedImage(newUri(http://www.baidu ...

  8. spring事物的传播行为

    1.spring事物的传播行为,主要是用来解决业务层拥有事物的方法,相互调用的问题. 2.声明事物, 在代码执行前,开启事务.代码执行完,提交事务 3.spring并没有提供事务具体的处理,而只是调用 ...

  9. PHP微信公众号 access_token缓存

    PHP创建access_token.json文件,将access_token 和 生成时间expires 保存在其中, {"access_token":"xxxx&quo ...

  10. JN_0005:PS改变图片指定内容颜色

    1,打开图片. 2,选择选区,抽取出独立图存 选中选区,按ctrl + alt + j ,抽取图层. 3,选中图层,再按住 ctrl,点击图层图标 的白色选区处,即可选中图层中的内容. 4,选中图层内 ...