- <%@ 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>
来源: http://www.bubuko.com/infodetail-2504501.html