导航菜单

最新推荐文章于 2025-08-11 19:52:03 发布

转载最新推荐文章于 2025-08-11 19:52:03 发布 · 56 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/f158w058/p/6529262.html

文章标签：

#javascript #人工智能 #开发工具 #ViewUI

本文提供了一个详细的jQuery教程，包括jQuery的基础知识、选择器的使用方法、DOM操作等核心内容，并通过实例展示了如何利用jQuery简化网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  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>