1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>1-5-1</title> 6 <style type="text/css"> 7 #menu { 8 width:300px; 9 } 10 .has_children{ 11 background : #555; 12 color :#fff; 13 cursor:pointer; 14 } 15 .highlight{ 16 color : #fff; 17 background : green; 18 } 19 div{ 20 padding:0; 21 } 22 div a{ 23 background : #888; 24 display : none; 25 float:left; 26 width:300px; 27 } 28 29 .a_hover{ 30 background:#B4D2B4; 31 } 32 </style> 33 <!-- 引入 jQuery --> 34 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 35 <script type="text/javascript"> 36 //等待dom元素加载完毕. 37 $(document).ready(function(){ 38 $(".has_children").click(function(){ 39 40 $(this).addClass("highlight") //为当前元素增加highlight类 41 .children("a").show().end() //将子节点的a元素显示出来并重新定位到上次操作前的元素 42 .siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类 43 .children("a").hide(); //将兄弟元素下的a元素隐藏 44 45 } 46 ); 47 48 //子菜单选中颜色方法一： 49 /*$(".has_children>a").mouseover(function(){ 50 $(this).css("background","#B4D2B4"); 51 } 52 ); 53 54 $(".has_children>a").mouseout(function(){ 55 $(this).css("background",""); 56 } 57 );*/ 58 59 //子菜单选中颜色方法二： 60 $(".has_children>a").hover( 61 function(){ 62 $(this).addClass('a_hover'); 63 }, 64 function(){ 65 $(this).removeClass('a_hover'); 66 } 67 ); 68 69 70 }); 71 </script> 72 </head> 73 <body> 74 <div id="menu"> 75 <div class="has_children"> 76 <span>第1章-认识jQuery</span> 77 <a>1.1-JavaScript和JavaScript库</a> 78 <a>1.2-加入jQuery</a> 79 <a>1.3-编写简单jQuery代码</a> 80 <a>1.4-jQuery对象和DOM对象</a> 81 <a>1.5-解决jQuery和其它库的冲突</a> 82 <a>1.6-jQuery开发工具和插件</a> 83 <a>1.7-小结</a> 84 </div> 85 <div class="has_children"> 86 <span>第2章-jQuery选择器</span> 87 <a>2.1-jQuery选择器是什么</a> 88 <a>2.2-jQuery选择器的优势</a> 89 <a>2.3-jQuery选择器</a> 90 <a>2.4-应用jQuery改写示例</a> 91 <a>2.5-选择器中的一些注意事项</a> 92 <a>2.6-案例研究——类似淘宝网品牌列表的效果</a> 93 <a>2.7-还有其它选择器么？</a> 94 <a>2.8-小结</a> 95 </div> 96 <div class="has_children"> 97 <span>第3章-jQuery中的DOM操作</span> 98 <a>3.1-DOM操作的分类</a> 99 <a>3.2-jQuery中的DOM操作</a> 100 <a>3.3-案例研究——某网站超链接和图片提示效果</a> 101 <a>3.4-小结</a> 102 </div> 103 </div> 104 </body> 105 </html>
posted on
