点击JSP左边的菜单如何显示右边的JSP页面，要求根据不同的菜单显示不同的jsp页面，要求用CSS+JSP+JS
尽量不要用到框架。求助高手，我的代码如下，显示不了右边的JSP页面！<%@pagelanguage="java"import="java.util.*"pageEncod...
尽量不要用到框架。求助高手，我的代码如下，显示不了右边的JSP页面！
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ShowMessage.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="./GoodManage/Showmessage.css">
<script>
function a(index)
{
var div=document.getElementById('right');
var divs=zymain.getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
{
divs[i].style.display="none";
}
divs[index-1].style.display="block";
}
</script>
</head>
<body>
<div id="content">
<div id="logo">
<img height="150px" width="1200px" src ="F:\photo\图片\广告创意思维\12.jpg" alt="logo"></img>
</div>
<div id="left">
<ul id="menu">
<li onclick="a(1)">商品管理</li>
<li onclick="a(2)">员工管理</li>
<li onclick="a(3)">订单管理</li>
<li onclick="a(4)">销售情况</li></ul>
</div>
<div id="right">
<div id="demo1" style="display:none;"><jsp include="GoodManage.jsp" /></div>
<div id="demo2" style="display:none;"><jsp include="WorkerManage.jsp" /></div>
<div id="demo3" style="display:none;"><jsp include="OrderManage.jsp" /></div>
<div id="demo4" style="display:none;"><jsp include="SaleStatus.jsp" /></div>
</div>
<div id="footer">©淘书城版权所有</div>
</div>
</body>
</html> 展开
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ShowMessage.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="./GoodManage/Showmessage.css">
<script>
function a(index)
{
var div=document.getElementById('right');
var divs=zymain.getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
{
divs[i].style.display="none";
}
divs[index-1].style.display="block";
}
</script>
</head>
<body>
<div id="content">
<div id="logo">
<img height="150px" width="1200px" src ="F:\photo\图片\广告创意思维\12.jpg" alt="logo"></img>
</div>
<div id="left">
<ul id="menu">
<li onclick="a(1)">商品管理</li>
<li onclick="a(2)">员工管理</li>
<li onclick="a(3)">订单管理</li>
<li onclick="a(4)">销售情况</li></ul>
</div>
<div id="right">
<div id="demo1" style="display:none;"><jsp include="GoodManage.jsp" /></div>
<div id="demo2" style="display:none;"><jsp include="WorkerManage.jsp" /></div>
<div id="demo3" style="display:none;"><jsp include="OrderManage.jsp" /></div>
<div id="demo4" style="display:none;"><jsp include="SaleStatus.jsp" /></div>
</div>
<div id="footer">©淘书城版权所有</div>
</div>
</body>
</html> 展开
3个回答
展开全部
就是一选项卡嘛，很简单，你用jquery轻松搞定。不过如果你页面中没有引入jquery文件你得先下个jquery文件，然后放到你的JS文件夹里，然后在页面像引用JS那样在head里引用一下。然后下面的代码我已经改好了。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ShowMessage.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="./GoodManage/Showmessage.css">
<script>
$(document).ready(function(){
$("#menu li").each(function (index) {
$(this).click(function () {
$("div#right div.tab_content").hide();
$("div#right div.tab_content:eq(" + index + ")").show();
})
})
});
</script>
</head>
<body>
<div id="content">
<div id="logo">
<img height="150px" width="1200px" src ="F:\photo\图片\广告创意思维\12.jpg" alt="logo"></img>
</div>
<div id="left">
<ul id="menu">
<li onclick="a(1)">商品管理</li>
<li onclick="a(2)">员工管理</li>
<li onclick="a(3)">订单管理</li>
<li onclick="a(4)">销售情况</li></ul>
</div>
<div id="right">
<div class="tab_content" id="demo1" style="display:none;"><jsp include="GoodManage.jsp" /></div>
<div class="tab_content" id="demo2" style="display:none;"><jsp include="WorkerManage.jsp" /></div>
<div class="tab_content" id="demo3" style="display:none;"><jsp include="OrderManage.jsp" /></div>
<div class="tab_content" id="demo4" style="display:none;"><jsp include="SaleStatus.jsp" /></div>
</div>
<div id="footer">©淘书城版权所有</div>
</div>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ShowMessage.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="./GoodManage/Showmessage.css">
<script>
$(document).ready(function(){
$("#menu li").each(function (index) {
$(this).click(function () {
$("div#right div.tab_content").hide();
$("div#right div.tab_content:eq(" + index + ")").show();
})
})
});
</script>
</head>
<body>
<div id="content">
<div id="logo">
<img height="150px" width="1200px" src ="F:\photo\图片\广告创意思维\12.jpg" alt="logo"></img>
</div>
<div id="left">
<ul id="menu">
<li onclick="a(1)">商品管理</li>
<li onclick="a(2)">员工管理</li>
<li onclick="a(3)">订单管理</li>
<li onclick="a(4)">销售情况</li></ul>
</div>
<div id="right">
<div class="tab_content" id="demo1" style="display:none;"><jsp include="GoodManage.jsp" /></div>
<div class="tab_content" id="demo2" style="display:none;"><jsp include="WorkerManage.jsp" /></div>
<div class="tab_content" id="demo3" style="display:none;"><jsp include="OrderManage.jsp" /></div>
<div class="tab_content" id="demo4" style="display:none;"><jsp include="SaleStatus.jsp" /></div>
</div>
<div id="footer">©淘书城版权所有</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
右边用一个iframe就行了，点左边把iframe的url改掉就行。
你的js应该写错了
var divs=zymain.getElementsByTagName('div');
这个应该是
var divs=div.getElementsByTagName('div');
你的js应该写错了
var divs=zymain.getElementsByTagName('div');
这个应该是
var divs=div.getElementsByTagName('div');
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这种情况下一般是用iframe，不然的话就需要是js把右侧的页面（也就是一个大的div吧）销毁和添加一个新的div，否则将整个页面重写的话会有很明显的刷新感，当然这种刷新感和浏览器也有一定的关系。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
