肉松饼罗曼史 2021-03-09 18:14 采纳率: 42.9%
浏览 3331
已采纳

如何实现左侧菜单,右侧显示页面内容

问题描述:如下图,我点击新建用例后,右侧就提示404了。我的是一个javaweb项目,遇到这个想了好久不知道该怎么弄,大佬可以帮忙指正一下吗?

我的目的:点击左侧的菜单,然后右侧可以展示内容

<%@ page language="java" import="java.util.*" contentType="text/html; charset=GB2312" %>
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>自动化测试数据分析平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <!--图标库-->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" charset="utf-8">
    <!--核心样式-->
    <link rel="stylesheet" type="text/css" href="css/aqua.min.css" charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" charset="utf-8"/>
    <!-- 引入样式 -->

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" charset="utf-8"/>
    <!-- 引入组件库 -->
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div class="container flex flex-wrap justify-between">

    <div class="light-mode mx-8 my-4 h-full bg-primary flex flex-col justify-between px-6 py-12 rounded overflow-hidden">
        <div>
            <i class="fab fa-codepen mb-8 ml-3 text-secondary-darkest text-2xl cursor-pointer"> 测试管理</i>
            <div class="input-group">
                <div class="btn">
                    <i class="icon fas fa-search"></i>
                </div>
                <input type="text" class="form-control" placeholder="查找用例">
            </div>
            <ul class="menu mt-6">
                <li class="menu-item active"><i class="icon fas fa-user mr-5"></i>
<%--                    <%--%>
<%--                        String path = request.getContextPath();--%>
<%--                        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";--%>
<%--                        System.out.println(basePath);--%>
<%--                    %>--%>
                    <a href= "process.jsp" target="myframe">新建用例</a><!--调试-->
                </li>
                <li class="menu-item" ><i class="icon fas fa-star mr-5" id= "iframe-page-content"></i>
                <a href= "PerformanceCharts.jsp" target="myframe">性能测试报告</a></li>
                <li class="menu-item"><i class="icon fas fa-check-square mr-5"></i>压测结果分析</li>
                <li class="menu-item"><i class="icon fas fa-compass mr-5"></i>Web端测试报表</li>
                <li class="menu-item"><i class="icon fas fa-compass mr-5"></i>Android测试报表</li>
                <li class="menu-item"><i class="icon fas fa-compass mr-5"></i>接口测试报表</li>
                <li class="divider"></li>
                <li class="menu-item"><i class="icon fas fa-image mr-5"></i>上传数据</li>
                <li class="menu-item"><i class="icon fas fa-image mr-5"></i>测试小工具</li>
                <li class="menu-item"><i class="icon fas fa-image mr-5"></i>数据解析</li>
                <li class="menu-item"><i class="icon fas fa-bell mr-5"></i>其它操作</li>
            </ul>
        </div>
        <div class="flex justify-between items-center">
            <div class="flex items-center cursor-pointer">
                <img
                        src="img/1.jpg"
                        alt="" class="w-9 rounded-full">

                <div class="ml-3 text-info-lighter">一条小小松子</div>
            </div>
        </div>
    </div>
</div>

<iframe  src="" name="myframe" width="100%" frameborder="no" border="0" marginwidth="0" marginheight=" 0" scrolling="no" allowtransparency="yes"></iframe>


<script src="js/script.js" type="text/javascript">
</script>
</body>
</html>

  • 写回答

1条回答 默认 最新

  • 旅人杰 2021-03-10 09:15
    关注

    楼主,我当年毕设时候刚好用到跟你一样的效果,你可以参考我的帖子,大概思路是分成是三个页面,一个总页面,一个左侧目录子页面,一个右侧详情子页面,将两个子页面引入到总页面,并根据标签实现点击左侧目录/菜单,右侧加载不同效果的功能,,,,,https://blog.csdn.net/qq_42554719/article/details/105467253?spm=1001.2014.3001.5501,或者可以看我发布文章

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 三种调度算法报错 有实例
  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥200 询问:python实现大地主题正反算的程序设计,有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错,能帮助用python实现程序实现高斯正反算吗?有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错?CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备