关键字：使用标签页，静态调用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. 让QT/Embedded支持国际化

    让QT/Embedded支持国际化 环境配置: Qt/Embedded ,在主机和目标板上存放路径都为:/root/qt-embedded-free- Qt/X11 3.3 (主要用到其中的lupda ...

  2. Java网络编程技术1

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

  3. linux进程、调度、线程、进程上下文等几点理解

    1.信号来自进程或内核 2.线程共享进程的代码空间和数据空间(全局变量或静态变量),文件描述符,信号,以及malloc分配的内存,每个线程拥有独立的栈空间和程序计数器,在创建线程时,调用pthread ...

  4. EMC ViPR all in one page

    EMC ViPR 2.0 Product Documentation Index https://community.emc.com/docs/DOC-35557

  5. cocos2d-x-3.1 win32程序-初识源代码(coco2d-x 学习笔记二)

    本人吊丝一枚.没钱买mac电脑,仅仅能使用Visual Studio2013来开发cocos2d-x项目.当然也能够用eclipse来开发,可是开发与配置步骤要复杂的多,而且非常多功能没有其好.也是官 ...

  6. Android -- ViewPager、Fragment、状态保存、通信

    工程架构                                                                                      TabAFm到Tab ...

  7. FM遇到错误RQP-DEF-0354和QE-DEF-0144

    版本:Cognos 10.2.1 系统:Win10 操作过程:在FM调用了一个存储过程,其中引用了前端page页面的参数如下图所示,在验证和保存查询主题的时候一直提示参数没有替换值,错误 信息如下图所 ...

  8. Transformer中引用iqd作为数据源的时候数据预览出现乱码

    在cognos开发利用transform建模的过程中导入iqd数据源预览乱码问题,下面先描述一下环境 操作系统版本: [root@enfo212 ~]# cat /proc/version Linux ...

  9. 整数划分问题--DFS

    单点时限:1000ms 内存限制:256MB 描写叙述 Given two positive integers N and M, please divide N into several intege ...

  10. Facebook 开源动画库 pop

    官网:https://github.com/facebook/pop Demo: https://github.com/callmeed/pop-playground 一:pop的基本构成: POPP ...