prototype.js 下载：http://www.prototypejs.org/download
页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<head>
<script language="JavaScript" src="prototype.js"></script>
<style type="text/css">
<!--
#top {
position:absolute;
left:186px;
top:45px;
width:429px;
height:27px;
z-index:1;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
}
ul{
list-style-type: none;
margin: 2;
}
li{
float: left;
background-position: center;
width: 120px;
}
#content {
position:absolute;
left:186px;
top:75px;
width:431px;
height:261px;
z-index:2;
border: 1px solid #66CCFF;
}
-->
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
function ajaxdoit(i)
{
var myAjax;
var param="id="+i;
var options={
method:"get",
parameters:param,
onComplete:showResponse
};
myAjax=new Ajax.Request("/test/test",options);
}
function showResponse(request)
{
$("content").innerHTML = request.responseText;
}
//-->
</script>
<div id="top">
<ul>
<li><a href="#" οnclick="ajaxdoit('1');">title1</a></li>
<li><a href="#" οnclick="ajaxdoit('2');">title2</a></li>
<li><a href="#" οnclick="ajaxdoit('3');">title3</a></li>
</ul>
</div>
<div id="content"></div>
</body>
</html>
可见当点击title1,title2,title3的时候触发 js函数，带参数请求 /test/test (这里请求的是一个Servlet)，并把结果显示在id 为content的层中
java 类(Servlet)主要代码:
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String id = request.getParameter("id");
int iID = Integer.parseInt(id);
switch (iID) {
case 1:
out.print("这是标题一的内容");
break;
case 2:
out.print("这是标题二的内容");
break;
default:
out.print("这是标题三的内容");
}
out.flush();
out.close();
到时候，更改逻辑：从数据库中取数据就能完成漂亮的功能了
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
