Jsp页面的头部导入一个下拉框的Jsp文件后,将index.jsp的下拉框拉下后，下面的整个div框也跟着往下移动
Jsp页面(index.jsp)的头部导入一个下拉框的Jsp文件(login.jsp)后,在index.jsp拉下下拉框时，index原本下面的div框也跟着整个往下移动...
Jsp页面(index.jsp)的头部导入一个下拉框的Jsp文件(login.jsp)后,在index.jsp拉下下拉框时，index原本下面的div框也跟着整个往下移动： 请问如何解决？
想做成这样的效果：
未解决代码如下：
<body> <!--导入的下拉登录JSP文件：--> <div style="position: relative;z-index: 99;"><jsp:include page="Login/login.jsp"/>
</div> <!--下拉登录-->
<!--下方的整体页面--> <div id="page" style="margin: -6px 160px;z-index=10;">
<div><!--整体页面END-->
</body> 展开
想做成这样的效果：
未解决代码如下：
<body> <!--导入的下拉登录JSP文件：--> <div style="position: relative;z-index: 99;"><jsp:include page="Login/login.jsp"/>
</div> <!--下拉登录-->
<!--下方的整体页面--> <div id="page" style="margin: -6px 160px;z-index=10;">
<div><!--整体页面END-->
</body> 展开
2个回答
展开全部
我用到了jquery，下面这样写可以实现你说的
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel {
height: 120px;
display: none;
}
</style>
</head>
<body>
<!--导入的下拉登录JSP文件：-->
<div id="panel"
style="background-color: gray;position:absolute;z-index: 99;"><jsp:include
page="login.jsp" />
</div>
<!--下拉登录-->
<!--下方的整体页面-->
<div id="page" style="z-index=10;">
<p id='login' style="position:absolute;left:100px;">点击出现或隐藏登录框</p>
<% //模拟内容可以查看到效果
for(int i=0;i<50;i++){
out.print(i+"<br>");
}
%>
<div>
<!--整体页面END-->
</body>
</html>
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
login.jsp
<% //模拟内容可以查看到效果
for(int i=0;i<5;i++){
out.print(i+"<br>");
}
%>
</body>
</html>
下面是效果图
点击前：
点击后：
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个比较麻烦·要是自己做练习建议换个模板
这两个div不能在同一个div里面，在同一个div中肯定会出现这样的问题，在同一个div中出现这样的问题算是好的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
