1.页面中的tab

在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图

就直接使用了bootstrapd的选项卡

学习源头:

http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

<!--图表信息  -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#zfbt" data-toggle="tab">
支付成功订单数量
</a>
</li>
<li><a href="#cjbt" data-toggle="tab">总计成交金额</a>
</li><li><a href="#pvbt" data-toggle="tab">PV</a></li>
</li><li><a href="#uvbt" data-toggle="tab">UV</a></li>
</ul>
<div id="myTabContent" class="tab-content" style="margin-top: 20px;">
<div class="tab-pane fade in active" id="zfbt">
<div id="zf" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="cjbt">
<div id="cj" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="pvbt">
<div id="pv" style="width: 1688px;height:400px;"></div>
</div>
<div class="tab-pane fade" id="uvbt">
<div id="uv" style="width: 1688px;height:400px;"></div>
</div>
</div>

2.弹窗中的tab

学的时候翻看到了layer的 tab层

//tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});

bootstrap 选项卡的使用的更多相关文章

  1. Bootstrap选项卡

    前面的话 选项卡Tabs是Web中一种非常常用的功能.用户点击对菜单项,能切换出对应的内容.本文将详细介绍Bootstrap选项卡 基本用法 Bootstrap框架中的选项卡主要有两部分内容组成: 1 ...

  2. echarts之bootstrap选项卡不能显示其他标签echarts图表

    在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...

  3. bootstrap选项卡页面中如何关闭当前选项卡及页面

    再具体说一下现在的需求: 如上界面:在新闻发布界面有一个按钮,在点击按钮的时候我需要直接把这个打开的选项卡关闭 实现思路: 1)关闭选项卡对应的页面     2)去除上方选项卡      3)激活前一 ...

  4. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  5. bootstrap如何设置每一个选项卡对应一个页面

    bootstrap选项卡如果直接在每一个选项div中直接插入页面,可以使用<object type="text/html" data="test.html" ...

  6. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  7. Bootstrap学习目录

    前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...

  8. 前端之移动端库和框架bootstrap

    学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和PC端 ...

  9. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

随机推荐

  1. 如何安装Pycharm官方统计代码行插件

    最近一直想统计Pycharm的总计代码行数,找到了官方的统计行数插件,发现效果还不错. 官方代码统计插件指导: https://plugins.jetbrains.com/plugin/4509-st ...

  2. 初识Java——循环语句

    循环语句就是在一定条件下反复执行某一个操作.具体有三种方法实现: 1while循环语句 while语句也称作条件判断语句,它的循环方式为利用一个条件来控制是否要反复执行.语法如下: while(条件语 ...

  3. P3370 【模板】字符串哈希

    题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. 输入输出格式 输入格式: 第一行包含一个整数N,为字符串 ...

  4. vfd折腾(一)

    从一开始驱动一块翻出来的液晶显示屏就想做一个电子时钟,偶然翻到了vfd(Vacuum Fluorescent Display的缩写,意为真空荧光显示屏). 此后就走上了不归路

  5. Invoke-ASCmd 部署SSAS database

    Install-Module -Name SqlServer -RequiredVersion 21.0.17099 -AllowClobberInvoke-ASCmd -Server 10.162. ...

  6. EF Linq中的左连接Left Join查询

    linq中的join是inner join内连接,就是当两个表中有一个表对应的数据没有的时候那个关联就不成立. 比如表A B的数据如下 from a in A join b in B on a.BId ...

  7. hadoop is running beyond virtual memory limits问题解决

    单机搭建了2.6.5的伪分布式集群,写了一个tf-idf计算程序,分词用的是结巴分词,使用standalone模式运行没有任何问题,切换到伪分布式模式运行一直报错: hadoop is running ...

  8. vue UI库iview源码解析(2)

    上篇问题 在上篇<iview源码解析(1)>中的index.js 入口文件的源码中有一段代码有点疑惑: /** * 在浏览器环境下默认加载组件 */ // auto install if ...

  9. HBuilder 打包流程

    1.运行HBuilder---百度搜索HBuilder,官网下载安装包,解压,运行HBuilder.exe.注册账号,并登陆 2.新建app---在左边右键,选择新建APP,或者,点击中间的新建app ...

  10. Springboot 框架学习

    Springboot 框架学习 前言 Spring Boot是Spring 官方的顶级项目之一,她的其他小伙伴还有Spring Cloud.Spring Framework.Spring Data等等 ...