关键字：使用标签页，静态调用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. GUI程序设计

    1. 对话框(JDialog)使用示例 例1. JDialog简单使用示例. import javax.swing.JLabel; public class demoJDialog { JFrame ...

  2. OpenCV学习(29) 凸包(convexhull)

    在opencv中,通过函数convexHulll能很容易的得到一系列点的凸包,比如由点组成的轮廓,通过convexHull函数,我们就能得到轮廓的凸包.下面的图就是一些点集的凸包. 求凸包的代码如下: ...

  3. 第十六章 springboot + OKhttp + String.format

    模拟浏览器向服务器发送请求四种方式: jdk原生的Http包下的一些类 httpclient(比较原始,不怎么用了):第一章 HttpClient的使用 Okhttp(好用,推荐) retrofit( ...

  4. 【Cocos2d-X开发学习笔记】第12期：动作类CCAction的详细讲解

    一般对于游戏中的精灵而言,它们不仅仅是存在于场景中,而且是动态展现的,例如,精灵移动的动态效果.动 画效果.跳动效果.闪烁和旋转动态效果等.每一种效果都可以看成是精灵的一个动作. 一.动作类(CCAc ...

  5. Android动画-补间(Tween)动画

    Android动画的两种方式,其中帧动画上篇文章已经讲了,这次主要讲解的就是补间动画,补间动画就是动画业务场景中常用的旋转,平移,缩放,和渐变效果,帧动画是通过轮播动画实现动画效果,补间动画通过在两个 ...

  6. operator++()和operator++(int)的区别

    很久以前(八十年代),没有办法区分++和--操作符的前缀与后缀调用.这个问题遭到程序员的报怨,于是C++语言得到了扩展,允许重载increment 和 decrement操作符的两种形式. 然而有一个 ...

  7. 解决: Connection to https://dl-ssl.google.com refused

    第一步: 在 hosts 中增加以下 地址转义 #Google主页203.208.46.146 www.google.com#这行是为了方便打开Android开发官网 现在好像不FQ也可以打开#74. ...

  8. Ubuntu下安装Hadoop

    终于把Hadoop的环境给配好了.在美国的第一个周末,非常的折腾,电脑坏了,一开机windows动画过后屏幕就没显示,无语死了,在想着人生地不熟的,哪里去找人修电脑,还好一个舍友说看到隔壁街有个PC ...

  9. 【转】gcc选项

    http://zodiac1111.github.io/blog/config-gcc-warning/

  10. 【nodejs】使用put方式向后端提交数据

    页面代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Ty ...