关键字：使用标签页，静态调用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. org-mode入门教程

    org-mode 入门教程By Z.H. Fu 切问录 www.fuzihao.org org-mode 入门教程 org-mode是Emacs提供的一个强大的编辑模式,可以用于做会议笔记以及制作各种 ...

  2. CRFPP/CRF++编译安装与部署

    CRFPP/CRF++编译安装与部署 下载CRF++ https://taku910.github.io/crfpp/#download 说明:在上面网站中下载CRF++ 0.58 解压 tar zx ...

  3. maven+jenkins+jmeter性能测试：maven把项目依赖拷贝到项目指定位置

    先上pom.xml配置: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...

  4. JBoss 系列一 O O：Maven jBPM 6 集成演示样例

    概述 jBPM 6 中底层架构基于 Maven,所以我们能够非常easy的进行 Maven jBPM 6 集成演示样例,本文分三个部分: 基本原理介绍 Maven jBPM 6 集成 jBPM 6 中 ...

  5. Horspool 字符串匹配算法

    Horspool 字符串匹配算法对Boyer-Moore算法的简化算法. Horspool 算法是一种基于后缀匹配的方法,是一种“跳跃式”匹配算法,具有sub-linear亚线性时间复杂度. Hors ...

  6. Sort Colors leetcode java

    题目: Given an array with n objects colored red, white or blue, sort them so that objects of the same ...

  7. Java基础（一）：简介

    一.java基础语法: 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...

  8. （转）[unity3d]easytouch的使用

    对于移动平台上的RPG类的游戏,我们常用虚拟摇杆来控制人物角色的行走和一些行为,相信我们对它并不陌生,之前尝试了EasyTouch2.5,发现并没有最新版的3.1好用,2.5版本的对于自适应没有做的很 ...

  9. 微信小程序scroll-view不动的处理

    scroll-view原来好好的,最近突然不动了,捣鼓半天,居然是要手工设定为scroll属性!下面两样样式必不可少,一是设定滚动方向上的宽度或高度,二是设置超出的处理为scroll 1.设定宽度 2 ...

  10. 【Nodejs】理想论坛帖子爬虫1.01

    用Nodejs把Python实现过的理想论坛爬虫又实现了一遍,但是怎么判断所有回调函数都结束没有好办法,目前的spiderCount==spiderFinished判断法在多页情况下还是会提前中止. ...