jquery导航栏

来源：互联网发布：网络广告语关于红酒编辑：程序博客网时间：2024/05/17 22:41

做一个导航栏，单击不同的菜单链接，显示相应的内容，同时高亮显示当前选择的菜单。

<%@ 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>

0 0