关键字:使用标签页,静态调用html页面(使用iframe内联框架)

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css"> <title>基本资料管理-部门管理</title>
</head>
<body>
<!------------ 标签标题--------------------> <ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#depart" data-toggle="tab">部门管理</a></li>
<li><a href="#goodssorts" data-toggle="tab">物品分类管理</a></li>
<li><a href="#measurement" data-toggle="tab">计量单位管理</a></li>
<li><a href="#input" data-toggle="tab">入库类型管理</a></li>
<li><a href="#outtype" data-toggle="tab">出库类型管理</a></li>
<li><a href="#suppliertype" data-toggle="tab">供应商类型管理</a></li>
</ul> <!------------ 标签内容--------------------> <div id="myTabContent" class="tab-content">
<!-- 部门-->
<div class="tab-pane fade in active" id="depart">
<IFRAME SRC="comAdmin_basic_depart.html" frameborder="0" width="800px" height="800px"></IFRAME>
</div>
<!-- 物品分类-->
<div class="tab-pane fade" id="goodssorts" >
<IFRAME SRC="comAdmin_basic_goodssorts.html" frameborder="0" width="800px" height="800px"></IFRAME>
</div>
<!-- 计量单位-->
<div class="tab-pane fade" id="measurement" >
<IFRAME SRC="comAdmin_basic_measurement.html" frameborder="0" width="800px" height="800px"></IFRAME>
</div>
<!-- 入库类型-->
<div class="tab-pane fade" id="intype">
<IFRAME SRC="comAdmin_basic_intype.html" frameborder="0" width="800px" height="800px"></IFRAME>
</div>
<!-- 出库类型-->
<div class="tab-pane fade" id="outtype">
<IFRAME SRC="comAdmin_basic_outtype.html" frameborder="0" width="800px" height="800px"></IFRAME>
</div>
<!-- 供应商类型-->
<div class="tab-pane fade" id="suppliertype">
<IFRAME SRC="comAdmin_basic_suppliertype.html" frameborder="0" width="800px" height="800px"></IFRAME>
</div> </div> <script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

效果图如下所示:

使用bootstrap标签页的更多相关文章

  1. Bootstrap 标签页(Tab)插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  2. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  3. Bootstrap 标签页和工具提示插件

    一.标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

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

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

  5. bootstrap 标签页tab切换js(含报错原因)

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  6. Bootstrap标签页(Tab)插件事件

    事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 even ...

  7. Bootstrap标签页(Tab)插件

    标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...

  8. Bootstrap标签页

    用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文 ...

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

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

随机推荐

  1. linux统计文件夹内文件数

    for dir in `find ./ -type d ` ;do echo -n "$dir "  ;find $dir  -type f | wc -l ;echo " ...

  2. Json解析教程(四.FastJson 的使用)

    简介 Fastjson是一个Java语言编写的高性能功能完善的JSON库. 高性能 fastjson采用独创的算法,将parse的速度提升到极致,超过所有json库,包括曾经号称最快的jackson. ...

  3. 计算Fisher vector和VLAD

    This short tutorial shows how to compute Fisher vector and VLAD encodings with VLFeat MATLAB interfa ...

  4. P值(P-value),“差异具有显著性”和“具有显著差异”

    郑冰刚提到P值,说P值的定义(着重号是笔者加的,英文是从WikiPedia摘来的): P值就是当原假设为真时,比所得到的样本观察结果更极端的结果出现的概率. The P-value is the pr ...

  5. CF 327B. Hungry Sequence

    B. Hungry Sequence time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  6. 我所理解的设计模式(C++实现)——解释器模式(Interpreter Pattern)

    概述: 未来机器智能化已然成为趋势,现在手机都能听懂英语和普通话,那我大中华几万种方言的被智能化也许也是趋势,我们的方言虽然和普通话相似,但是还是不一样的.这可能需要一个新的语法分析器来帮助我们. 我 ...

  7. go语言基础之init函数的介绍

    1.init函数的介绍 示例: 文件夹目录如下: 源代码: vi main.go   //程序入口 package main //必须 import ( "calc" " ...

  8. BeautifulSoup4----利用find_all和get方法来获取信息

    中文文档 官方教学网页源码: <html> <head> <title>Page title</title> </head> <bod ...

  9. VMware vCenter中, 如何辩认虚机上Raw Device Mapping过了的一块物理磁盘?

    比如说, 我们有一套VMware的环境, 其中有一台运行者ESXi的主机, 其上有十块SAS盘. 这十块盘中的五块盘被RDM到一台虚机上了. 假设你发现有添加多了一块盘, 你想移除掉, 但是5块盘其中 ...

  10. Okhttp【简介】应用 示例

    资源 GitHub:https://github.com/square/okhttp 官网     文档     API  You'll also need Okio[https://github.c ...