<%@ 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>jquery模拟菜单的效果</title><style type="text/css">div * {display:block;}div span{color:red;font-size:20px;}</style><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){/*1.页面加载完成后，所有的a标签全都是隐藏的2.点击span标签，让该span标签后的所有a标签显示*/$("div a").hide(1000);$("span").click(function(){$("div a").hide();$(this).nextAll().show();})})</script></head><body><h3>模拟菜单的效果</h3><div><span id="span1">用户管理</span><a href="#">添加用户</a><a href="#">删除用户</a><p>----</p></div><div><span id="span2">订单管理</span><a href="#">添加订单</a><a href="#">删除订单</a><p>----</p></div><div><span id="span3">商品管理</span><a href="#">添加商品</a><a href="#">删除商品</a><p>----</p></div></body></html>
24.jquery模拟菜单的效果
原文地址：https://www.cnblogs.com/syj1993/p/8463229.html