标签：学习 function click nal 休闲 cti htm jquer 4.0
简单的jquery学习，首先在页面引入jquery
<!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
首先一定要注意的是引入的路径
按照案例写一个简单的DEMO
<%@ 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"> <link rel="stylesheet" href="css/default.css" type="text/css" /> <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> <!-- 写入动作 --> <script type="text/javascript"> // 等待dom元素加载完毕加载 $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") //给当前元素添加"current"样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式 .next().hide(); //它们的下一个元素隐藏 return false; }); }); </script> <title>导航栏</title> </head> <body> <div class="box"> <ul class="menu"> <li class="level1"><a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">短袖</a></li> <li><a href="#none">长袖</a></li> <li><a href="#none">短T袖</a></li> <li><a href="#none">长T袖</a></li> </ul></li> <li class="level1"><a href="#none">卫衣</a> <ul class="level2"> <li><a href="#none">短袖</a></li> <li><a href="#none">长袖</a></li> <li><a href="#none">短T袖</a></li> <li><a href="#none">长T袖</a></li> </ul></li> <li class="level1"><a href="#none">裤子</a> <ul class="level2"> <li><a href="#none">短裤</a></li> <li><a href="#none">休闲裤</a></li> <li><a href="#none">牛仔裤</a></li> <li><a href="#none">免烫卡其裤</a></li> </ul></li> </div> </body> </html>
测试通过！
标签：学习 function click nal 休闲 cti htm jquer 4.0
原文地址：http://www.cnblogs.com/dizang/p/6254180.html
