jQueryMenul.html(菜单案例)

漆雕彦
2023-12-01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQueryMenul.html(菜单案例)</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <link rel="stylesheet" type="text/css" href="css/menu.css"  />
   <script type="text/javascript" src="jslib/jquery.js"></script>
   <script type="text/javascript" src="jslib/jquerymenu.js"></script>
  </head>
 
  <body>
   <ul>
       <a href="#">我是主菜单1</a>
       <li><a href="#" id="JqueryWindow.html">我是子菜单1</a></li>
       <li><a href="#" id="JqueryWindow.html">我是子菜单2</a></li>
   </ul>
   <ul>
       <a href="#">我是主菜单2</a>
       <li><a href="#">我是子菜单3</a></li>
       <li><a href="#">我是子菜单4</a></li>
   </ul>
   <div id="content"></div>
  </body>
</html>

 

 

 

 

 

 --js代码

$(document).ready(
   function (){
 
    //找到所有的主菜单
    var as=$("ul > a");
    //给主菜单注册onclick事件
    as.click(
    function (){
    
   var asNode=$(this); 
      var ass=asNode.nextAll("li");
   ass.toggle("slow");
    
    }
    );
 
 $("li > a").click(
     function (){
      
      $("#content").load($(this).attr("id"));  
      
     } 
 
 );  
   
   } 
);

 

 

 

 

 

 类似资料: