JQuery实现的二级餐单

 

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery.aspx.cs" Inherits="Jquery_EX.JQuery" %>
2
3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4  <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>JQuery菜单</title>
7 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
8 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 // $(function () {
11 // $("#1").hide();
12 // $("#2").hide();
13 // $("#jl").click(ShowJl);
14 // $("#ms").click(ShowMs);
15
16 // $("#cgk").click(CheckUrl);
17 // });
18 // function ShowJl() {
19 // $("#1").show();
20 // $("#2").hide();
21 // }
22 // function ShowMs() {
23 // $("#1").hide();
24 // $("#2").show();
25 // }
26 // function CheckUrl() {
27 // $("#Im").attr("src", "http://www.baidu.com/");
28 // }
29
30 $(function () {
31 hide();
32 spanclick();
33 uiclick()
34 });
35 //隐藏ul下的所有标签
36 function hide() {
37 $("ul").each(function (i) {
38 $(this).hide();
39 })
40 }
41
42 function spanclick() {
43 $("span").each(function (i) {
44 $(this).click(function () {
45 hide();
46 $(this).parent().find("ul").show();
47 })
48 })
49 }
50
51 function uiclick() {
52 $("li").each(function (i) {
53 $(this).find("a").attr("title");
54 $(this).click(function () {
55 $("#Im").attr("src", $(this).find("a").attr("title"));
56 })
57
58 })
59 }
60 </script>
61 </head>
62 <body>
63 <form id="form1" runat="server">
64 <div>
65 <div style="float: left; width: 20%">
66 <div>
67 <span id="jl">简历管理</span>
68 <ul id="1">
69 <li id="cgk"><a href="#" title="http://www.hao123.com">稿库库</a></li>
70 <li id="jlk"><a href="#" title="http://www.baidu.com">简历库</a></li>
71 </ul>
72 </div>
73 <div>
74 <span id="ms">面试管理</span>
75 <ul id="2">
76 <li><a href="#" title="http://www.sogou.com">未面库</a></li>
77 <li><a href="#" title="http://www.baidu.com">已面库</a></li>
78 </ul>
79 </div>
80 </div>
81 <div style="float:right; width: 80%">
82 <iframe id="Im" style="width: 100%; height: 800px;" src="http://www.hao123.com"></iframe>
83 </div>
84
85 </div>
86 </form>
87 </body>
88 </html>
89

 

posted @ 2010-11-19 10:01  x喜德盛  阅读(184)  评论(0编辑  收藏  举报