做一个导航栏，单击不同的菜单链接，显示相应的内容，同时高亮显示当前选择的菜单。
<%@ 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>
<base href="<%=basePath%>">
<title>My JSP 'fengge.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">
<script src="scripts/jquery-1.8.0.js" type="text/javascript"></script>
<style type="text/css">
#menu {
width: 300px;
}
.has_children {
background: #555;
color: #fff;
cursor: pointer;
}
.highlight {
color: #fff;
background: green;
}
div {
padding: 0;
margin: 10px 0;
}
div a {
background: #888;
display: none;
float: left;
width: 300px;
}
</style>
<script type="text/javascript">
$(function(){
$('.has_children').click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章 认识jQuery</span>
<a>1.1 第1节</a>
<a>1.2 第2节</a>
<a>1.3 第3节</a>
<a>1.4 第4节</a>
<a>1.5 第5节</a>
<a>1.6 第6节</a>
</div>
<div class="has_children">
<span>第2章 jQuery选择器</span>
<a>2.1 第1节</a>
<a>2.2 第2节</a>
<a>2.3 第3节</a>
<a>2.4 第4节</a>
<a>2.5 第5节</a>
<a>2.6 第6节</a>
</div>
<div class="has_children">
<span>第3章 jQuery中的DOM操作</span>
<a>3.1 第1节</a>
<a>3.2 第2节</a>
<a>3.3 第3节</a>
<a>3.4 第4节</a>
<a>3.5 第5节</a>
<a>3.6 第5节</a>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
