效果图
1.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>
<title>My JSP 'tests.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="<%=path %>/css/tcmsp.css">
<script language="JavaScript">
function clic(ids1,ids2,ids3)
{
document.getElementById("div"+ids1).style.display="";
document.getElementById("div"+ids2).style.display="none";
document.getElementById("div"+ids3).style.display="none";
document.getElementById("img"+ids1+"_on").style.display="";
document.getElementById("img"+ids2+"_on").style.display="none";
document.getElementById("img"+ids3+"_on").style.display="none";
document.getElementById("img"+ids1+"_off").style.display="none";
document.getElementById("img"+ids2+"_off").style.display="";
document.getElementById("img"+ids3+"_off").style.display="";
}
</script>
</head>
<body>
<table width="50%">
<tr>
<td width="100%">
<div style="border:1 solid #93D746;">
<table width="98%">
<tr>
<td width="50%" align="left">
1111
</td>
<td width="50%" align="right">
<img id="img1_off" src="<%=basePath %>images/kp_off.gif" style="display: none" onclick="clic('1','2','3')">
<img id="img1_on" src="<%=basePath %>images/kp_on.gif" style="display: " onclick="clic('1','2','3')">
</td>
</tr>
</table>
</div>
<div id="div1" style="border:1 solid #93D746;height:300px;display: ">
<table width="100%">
<tr>
<td width="100%">555 </td>
</tr>
</table>
</div>
<div style="border:1 solid #93D746;" >
<table width="98%">
<tr>
<td width="50%" align="left">
2222
</td>
<td width="50%" align="right">
<img id="img2_off" src="<%=basePath %>images/kp_off.gif" style="display: " onclick="clic('2','1','3')">
<img id="img2_on" src="<%=basePath %>images/kp_on.gif" style="display:none " onclick="clic('2','1','3')">
</td>
</tr>
</table>
</div>
<div id="div2" style="border:1 solid #93D746;height:300px;display:none ">
<table width="100%">
<tr>
<td width="100%" colspan="1">
O(∩_∩)O哈哈~
</td>
</tr>
</table>
</div>
<div style="border:1 solid #93D746;" >
<table width="98%">
<tr>
<td width="50%" align="left">
3333
</td>
<td width="50%" align="right">
<img id="img3_off" src="<%=basePath %>images/kp_off.gif" style="display: " onclick="clic('3','1','2')">
<img id="img3_on" src="<%=basePath %>images/kp_on.gif" style="display:none " onclick="clic('3','1','2')">
</td>
</tr>
</table>
</div>
<div id="div3" style="border:1 solid #93D746;height:300px;display:none ">
<table width="100%">
<tr>
<td width="100%">
(*^__^*) 嘻嘻……
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
用到的图标下载