关键字：使用标签页，静态调用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. strstr实现

    // strstr.c查找完全匹配的子字符串 #include<stdio.h> #include<string.h> char *my_strstr(const char * ...

  2. 莫比乌斯函数&莫比乌斯反演

    莫比乌斯函数:http://wenku.baidu.com/view/fbec9c63ba1aa8114431d9ac.html Orz  PoPoQQQ

  3. 【BZOJ】【1415】【NOI2005】聪聪和可可

    数学期望+记忆化搜索 论文:<浅析竞赛中一类数学期望问题的解决方法>——汤可因  中的第一题…… Orz 黄学长 我实在是太弱,这么简单都yy不出来…… 宽搜预处理有点spfa的感觉= = ...

  4. python中的归并排序

    本来在博客上看到用python写的归并排序的程序,然后自己跟着他写了一下,结果发现是错的,不得不自己操作.而自己对python不是非常了解所以就变百度边写,最终在花了半个小时之后就写好了. def m ...

  5. Java网络编程技术1

    1. Java网络编程常用API 1.1 InetAddress类使用示例 1.1.1根据域名查找IP地址 获取用户通过命令行方式指定的域名,然后通过InetAddress对象来获取该域名对应的IP地 ...

  6. Informatica 常用组件Source Qualifier之八 会话前和会话后 SQL

      可以在源限定符转换的"属性"选项卡中添加会话前和会话后 SQL 命令.您可能要使用会话前 SQL 以在会话开始时将时间标识行写入源表. PowerCenter 在读取源之前对源 ...

  7. tensorflow 之常见模块conv,bn...实现

    使用tensorflow时,会发现tf.nn,tf.layers, tf.contrib模块有很多功能是重复的,尤其是卷积操作,在使用的时候,我们可以根据需要现在不同的模块.但有些时候可以一起混用. ...

  8. IOS开发之新浪微博OAuth2

    说明:微博开放接口的调用,如发微博.关注等,都是需要获取用户身份认证的.目前微博开放平台用户身份鉴权主要采用的是OAuth2.0.为了方便开发者开发.测试自己的应用. OAuth2.0较1.0相比,整 ...

  9. 【SpringCloud】Netflix源码解析之Ribbon：负载均衡策略的定义和实现

    Ribbon负载均衡策略定义 IRule其实就只做了一件事情Server choose(Object key),可以看到这个功能是在LB中定义(要求)的,LB把这个功能委托给IRule来实现.不同的I ...

  10. 【转】Understanding the Angular Boot Process

    原文: https://medium.com/@coderonfleek/understanding-the-angular-boot-process-9a338b06248c ----------- ...