標籤：學習 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>
測試通過！
jquery學習（一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
