关键字：使用标签页，静态调用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. my.cnf 配置文件参数解释

    my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容.如果你 ...

  2. spark-submit提交作业过程

    1. 作业提交方法以及参数 我们先看一下用Spark Submit提交的方法吧,下面是从官方上面摘抄的内容. # Run application locally on 8 cores ./bin/sp ...

  3. C++ 使用TinyXML解析XML文件

    1.介绍 读取和设置xml配置文件是最常用的操作,TinyXML是一个开源的解析XML的C++解析库,能够在Windows或Linux中编译.这个解析库的模型通过解析XML文件,然后在内存中生成DOM ...

  4. Mac OS中Java Servlet与Http通信

    Java中一个Servlet其实就是一个类,用来扩展服务器的性能,服务器上驻留着可以通过“请求-响应”编程模型来访问的应用程序.Servlet可以对任何类型的请求产生响应,但通常只用来扩展Web服务器 ...

  5. AS 代码模板 文件模板 Templates MD

    修改 File and Code Templates Settings –> Editor –>[File and Code Templates] 或者在右键new时选择子菜单[Edite ...

  6. linux /dev 常见特殊设备介绍与应用[loop,null,zero,full,random]

    linux是文件型系统,所有硬件如软件都会在对于的目录下面有相应的文件表示.对于dev这个目录,我们知道它下面的文件,表示的是linux的设备.在windows系统中,设备大家很好理解,象硬盘,磁盘指 ...

  7. js 切换隐藏

    先试试 显示\隐藏切换 脚本之家欢迎您 切换隐藏 <style type="text/css"> #thediv { width:200px; height:100px ...

  8. svn自助改动password（PHP脚本实现）

    #创建脚本文件夹 mkdir -p /var/www/svn/svntools #创建apache配置文件 touch /etc/httpd/conf.d/alias.conf #输入下面内容: Al ...

  9. CDN具体解释（篇一）

    CDN是一个致力于使内容传输更快.更高效的针对webserver的全局分布式网络.通过CDN来复制使这些内容能够在非常多地方同一时候存在. 比較有名的CDN厂商有AKamari,Amazon Clou ...

  10. 【线段树】HDU 3397 Sequence operation 区间合并

    操作 Change operations: 0 a b change all characters into '0's in [a , b] 1 a b change all characters i ...