日期:2014-05-16  浏览次数:20356 次

JSP页面导航条切换。

有木有更加简单的方法实现,原谅我这个初学者写出来这种代码!


JSP Code
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP标签切换</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			function turnNextTab(lastId, LastSrc, id, src, nextId, nextSrc) {
				document.getElementById(id).src = src;
				document.getElementById(lastId).src = LastSrc;
				document.getElementById(nextId).src = nextSrc;
			}
		</script>
	</head>
	<body>
			<div id=left_b1>
				<div id="gdmenu"></div>
				<div id="gdmenu_on">
					<img id="img1" src="images/1_1.jpg" width="81" height="28" onclick="javascript:turnNextTab('img2', 'images/2.jpg', 'img1', 'images/1_1.jpg', 'img3', 'images/3.jpg')" />
				</div>
				<div id="gdmenu_off">
					<img id="img2" src="images/2.jpg" width="81" height="28" onclick="javascript:turnNextTab('img1', 'images/1.jpg', 'img2', 'images/2_1.jpg', 'img3', 'images/3.jpg')" />
				</div>
				<div id="gdmenu_off">
					<img id="img3" src="images/3.jpg" width="81" height="28" onclick="javascript:turnNextTab('img1', 'images/1.jpg', 'img3', 'images/3_1.jpg', 'img2', 'images/2.jpg')" />
				</div>
			</div>
	</body>
</html>


效果如图: