使用iframe实现将四个页面合成一个页面，并可以随意切换

最新推荐文章于 2024-06-20 18:18:57 发布

Java兔

最新推荐文章于 2024-06-20 18:18:57 发布

阅读量1w

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/huangjp_hz/article/details/64444793

版权

任务

将“抄表册管理”、“抄表计划管理”、“执行抄表”、“抄表数据审核”、“抄表数据发布”四个页面整合成一个页面：“计划抄表”，以流程图节点的形式进行串联。

效果如下

这里写图片描述
红箭头所指的地方是一个流程图，每一个节点点击后会显示该节点所对应的页面，而每个页面的显示都要从控制层为切入点进入。

代码

<%@page import="org.apache.commons.lang3.RandomUtils"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page import="org.springframework.context.i18n.LocaleContextHolder"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>计划抄表</title>
<%@ include file="/WEB-INF/view/head2.jsp" %>
<style type="text/css">
.management .power_menu {
  position: relative;
  left: 0px;
  top: 0px;
  right: auto;
  bottom: auto;
}
.management .power_menu ul {
  overflow: hidden;
  margin-bottom: -2px;
  padding-left: 1px;
  background-color: #fff;
  display: inline-block;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 10px solid #fff;
}
.management .power_menu li {
  margin-left: -1px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  float: left;
  background: #efefef;
  padding: 0px 15px;
  position: relative;
  z-index: 1;
}
.management .power_menu li.hover {
  color: #fff;
  background: #008feb;
  z-index: 2;
}
.management .power_menu li.hover em.left {
  display: inline-block;
  border: 15px solid #008feb;
  border-left: 15px solid #efefef;
}
.management .power_menu li.hover em.right {
  display: inline-block;
  border: 15px solid #efefef;
  border-left: 15px solid #008feb;
}
.management .power_menu li.hover:last-child em.right {
  display: inline-block;
  border: 15px solid #fff;
  border-left: 15px solid #008feb;
}
.management .power_menu li:last-child em.right

最低0.47元/天解锁文章

Java兔

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用iframe实现将四个页面合成一个页面，并可以随意切换

任务将“抄表册管理”、“抄表计划管理”、“执行抄表”、“抄表数据审核”、“抄表数据发布”四个页面整合成一个页面：“计划抄表”，以流程图节点的形式进行串联。效果如下红箭头所指的地方是一个流程图，每一个节点点击后会显示该节点所对应的页面，而每个页面的显示都要从控制层为切入点进入。代码&lt;%@page import="org.apache.commons....
复制链接

扫一扫

专栏目录