<%@ page language="java" contentType="text/html; charset=UTF-8" 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>
<meta charset="UTF-8">
<title></title>
<link href="css/common.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<!-- <script type="text/javascript" src="js/script.js"></script>-->
</head>
<body>
<!--header-->
<div>
<!--top-->
<div>
<img src="images/logo.png" alt=""/>
<img src="images/title_logo.png" alt=""/>
<div>
<span>系统管理员(Admin)</span>
<a href="#" target="_blank"><img src="images/user_icon.png" alt=""/>
<span>3</span>
</a>
<a href="#" target="_blank"><img src="images/fit_icon.png" alt=""/></a>
<a href="#" target="_blank"><img src="images/exit_icon.png" alt=""/> </a>
</div>
</div>
<!--top end-->
<!--menu-->
<div id="menu">
<ul id="aa">
</ul>
</div>
<!--menu end-->
<!--nav-->
<div>
<img src="images/front_icon.png" alt=""/>
<ul>
<li id="bb"></li>
</ul>
</div>
<!--nav end-->
<p></p>
<!--bread_map-->
<div>
<h4>当前位置：</h4>
<ul>
<li><a href="#">调度基础数据</a><span>></span></li>
<li><a href="#">调度基础数据库</a><span>></span> </li>
<li><a href="#">电网</a><span>></span></li>
<li><a href="#">总调直调电网</a><span>></span></li>
<li><a href="#">变电站</a><span>></span></li>
<li><a href="#">500kV海港变电站</a><span>></span></li>
</ul>
</div>
<!--bread_map end-->
</div>
<div>
</div>
<div>
</div>
<input type="text" value="<%=basePath %>" style="display:none" id="acc"/>
<!--footer end-->
</body>
<script type="text/javascript">
var path = document.getElementById("acc").value;
var dd = 0;
function GetXHR(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new window.XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new window.ActiveXObject();
}
return xhr;
}
window.onload = function(){
var xhr = GetXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var jay = eval(xhr.responseText);
var a = document.getElementById("aa");
for(var i=0;i<jay.length;i++){
a.innerHTML += "<li id='"+jay[i].MENU_ID+"' onclick='show(this);' onmouseover='subshow(this);' onmouseout='subhide(this);'><a href='#'>"+jay[i].MENU_NAME+"</a></li>";
}
}
}
xhr.open("POST",path+"get",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("op=CDTree/getCDTree&id="+"b62830d9-26d8-4614-a5e9-f202bdb91a2a");
}
function show(li){
var id = li.id;
var xhr = GetXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var jay = eval(xhr.responseText);
var a = document.getElementById("bb");
a.innerHTML = "";
for(var i =0;i<jay.length;i++){
a.innerHTML += "<a href='#'>"+jay[i].NAME+"</a>";
}
}
}
xhr.open("POST",path+"get",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("op=CDTree/showLJ&id="+id);
}
function subshow(li){
if(dd>0){
}else{
var id = li.id;
var xhr = GetXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var jay = eval(xhr.responseText);
var a = document.getElementById(id);
if(jay.length > 0){
var ul = document.createElement("ul");
ul.id = id+"1";
a.appendChild(ul);
// alert(1);
for(var i = 0; i<jay.length;i++){
document.getElementById(ul.id).innerHTML += "<li id='"+jay[i].ID+"' onclick='show(this);' onmouseover='subshow(this);' onmouseout='subhide(this);' ><a href='#'>"+jay[i].NAME+"</a></li>";
}
document.getElementById(ul.id).style.display = "block";
}
}
}
xhr.open("POST",path+"get",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("op=CDTree/subCD&id="+id);
dd = 1;
}
}
function subhide(li){
if(dd>0){
var submenu = li.getElementsByTagName("ul")[0];
if(submenu){
li.removeChild(submenu);
}
}
dd = 0;
}
</script>
</html>
菜单的第一级也是通过ajax获取的，需要样式也发过来吗？
7 回答
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
你说的清除li之间的间隔是代码之间的间隔还是HTML布局上的间隔
<ul>
<li><a href="#">调度基础数据</a><span>></span></li>
<li><a href="#">调度基础数据库</a><span>></span> </li>
<li><a href="#">电网</a><span>></span></li>
<li><a href="#">总调直调电网</a><span>></span></li>
<li><a href="#">变电站</a><span>></span></li>
<li><a href="#">500kV海港变电站</a><span>></span></li>
</ul>
添加回答
举报
0/150
提交
取消