复制代码 代码如下:
<%@ page language=java import=javautil* pageEncoding=UTF%>
<html>
<head>
<style type=text/css>
*{
textalign: center;
fontsize: px;
}
table{
bordercollapse: collapse;
width: %;
}
table tr td{
border: red solid px;
lineheight:px;
}
myclassmystu{
display: none;
}
myclass table tr tdmystu table tr td
{
bordertop: solid px red;
}
</style>
//导入JQuery包
<script type=text/javascript src=js/jqueryjs></script>
//写JQuery事件控制页面
<script type=text/javascript>
$(function(){
//事件注入点
$(#p)mouseover(function(){
$(myclass)show(slow);
$(mystu)hide();
$(this)css(backgroundcolor#ccff);
$(#p)css(backgroundcolor#ffffff);
});
$(#p)mouseover(function(){
$(mystu)show(slow);
$(myclass)hide();
$(this)css(backgroundcolor#ccff);
$(#p)css(backgroundcolor#ffffff);
});
});
</script>
</head>
<body>
<div class=mytop>
<table align=center>
<tr>
<td id=p>班级管理</td>
<td id=p>学生管理</td>
</tr>
</table>
</div>
<div class=myclass>
<table align=center>
<tr>
<td>班级编号</td>
<td>班级名称</td>
<td>备注</td>
</tr>
<tr>
<td>A</td>
<td>Java</td>
<td>优秀</td>
</tr>
<tr>
<td>A</td>
<td>Java Web</td>
<td>优秀</td>
</tr>
</table>
</div>
<div class=mystu>
<table align=center>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>所在班级</td>
</tr>
<tr>
<td></td>
<td>程博文</td>
<td>男</td>
<td>A</td>
</tr>
<tr>
<td></td>
<td>胡晓丽</td>
<td>女</td>
<td>A</td>
</tr>
</table>
</div>
</body>
</html>
