SKY外语计算机学习

标题: jq的菜单简单实现 [打印本页]

作者: rogan    时间: 2012-5-24 21:09
标题: jq的菜单简单实现

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
  3.     <head>
  4.         <title>1-5-1</title>
  5.         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  6.         <script src="lib/jquery/jquery-1.4.2.js">
  7.         </script>
  8.         <script language="javascript">
  9.             $(function(){
  10.                 $(".has_children").click(function(){
  11.                     $(this).addClass("highlight") //为当前元素增加highlight类
  12.             .children("a").show().end() //将子节点的<a>元素显示出来
  13.             .siblings().removeClass("highlight") //并重新定位到上次操作的元素获
  14.                     //取元素的兄弟元素,并去掉它们的
  15.                     //highlight类
  16.                     .children("a").hide(); //将兄弟元素下的<a>元素隐藏
  17.                 });
  18.             });
  19.         </script>
  20.         <style type="text/css">
  21.             #menu {
  22.                 width: 300px;
  23.             }
  24.             
  25.             .has_children {
  26.                 background: #555;
  27.                 color: #fff;
  28.                 cursor: pointer;
  29.             }
  30.             
  31.             .highlight {
  32.                 color: #fff;
  33.                 background: green;
  34.             }
  35.             
  36.             div {
  37.                 padding: 0;
  38.                 margin: 10px 0;
  39.             }
  40.             
  41.             div a {
  42.                 background: #888;
  43.                 display: none;
  44.                 float: left;
  45.                 width: 300px;
  46.             }
  47.         </style>
  48.     </head>
  49.     <body>
  50.         <div id="menu">
  51.             <div class="has_children">
  52.                 <span>第一章--认识jq</span>
  53.                 <a>1.1-Javascript 和javascript库</a>
  54.                 <a>1.2-加入jq</a>
  55.                 <a>1.3-编写简单jq</a>
  56.                 <a>1.3-编写简单jq</a>
  57.             </div>
  58.             <div class="has_children">
  59.                 <span>第一章--认识jq</span>
  60.                 <a>1.1-Javascript 和javascript库</a>
  61.                 <a>1.2-加入jq</a>
  62.                 <a>1.3-编写简单jq</a>
  63.                 <a>1.3-编写简单jq</a>
  64.             </div>
  65.             <div class="has_children">
  66.                 <span>第一章--认识jq</span>
  67.                 <a>1.1-Javascript 和javascript库</a>
  68.                 <a>1.2-加入jq</a>
  69.                 <a>1.3-编写简单jq</a>
  70.                 <a>1.3-编写简单jq</a>
  71.             </div>
  72.         </div>
  73.     </body>
  74. </html>

复制代码

作者: 夏师太~·    时间: 2012-5-25 10:30
本帖最后由 sky_yx 于 2015-12-30 14:15 编辑

天书 ! 鉴定完毕!


作者: rogan    时间: 2012-5-25 19:20
呵呵,这个还是简单的




欢迎光临 SKY外语计算机学习 (http://join.skywj.com/) Powered by Discuz! X2.5