24.jquery模擬菜單的效果
阿新 • • 發佈:2018-02-23
true cli hide tex 菜單 ref on() odi request
<%@ 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模擬菜單的效果