做一个导航栏,单击不同的菜单链接,显示相应的内容,同时高亮显示当前选择的菜单。
<%@ 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>