DreamWeaverCS5+JQuery写的简单的导航栏

最新推荐文章于 2024-09-14 18:52:56 发布

chongli0987

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量114

点赞数

文章标签： xhtml javascript 开发工具 ViewUI

原文链接：https://my.oschina.net/jiboping/blog/795946

版权

 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">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7   .menu{ width:300px;}
 8   .haschilden{height:40px;width:80px;background : #555;color :#fff;cursor:pointer;float:left;margin-left:1px;padding-top:20px;text-align:center;}
 9   .zh{ border-width:1px; border-style:solid; border-color:#F00; cursor:pointer; margin-left:1px; display:none;}
10   .highlight{ background-color:#F9F}
11 
12 </style>
13 <script src="jquery-1.7.js" type="text/javascript"></script>
14 <script type="text/javascript">
15    $(function(){
16 
17  $(".haschilden").mouseover(function(){
18                  $(this).addClass("highlight").siblings().removeClass("highlight");
19                 });
20 
21 
22        $(".menu div span").mouseover(function(){
23           var index=$(".menu div span").index(this);
24           $("#div1 .aa  div div").eq(index).show().parent().siblings("div").children().hide();
25           
26            });
27        });
28 </script>
29 </head>
30 
31 <body>
32 <div class="menu">
33    <div class="haschilden">
34        <span>中国</span>
35    </div>
36    <div class="haschilden">
37        <span>美国</span>
38    </div>
39    <div class="haschilden">
40        <span>日本</span>
41    </div>
42 </div>
43 
44 
45 <div id="div1">
46    <div class="aa">
47    
48       <div>
49           <div class="zh">
50             <a>1.1-JavaScript和JavaScript库</a><br />
51             <a>1.2-加入jQuery</a><br />
52             <a>1.3-编写简单jQuery代码</a><br />
53             <a>1.4-jQuery对象和DOM对象</a><br />
54             <a>1.5-解决jQuery和其它库的冲突</a><br />
55             <a>1.6-jQuery开发工具和插件</a><br />
56             <a>1.7-小结</a>
57           </div>
58       </div>
59     
60       <div>
61           <div class="zh">
62               <a>2.1-jQuery选择器是什么</a><br />
63               <a>2.2-jQuery选择器的优势</a><br />
64               <a>2.3-jQuery选择器</a><br />
65               <a>2.4-应用jQuery改写示例</a><br />
66               <a>2.5-选择器中的一些注意事项</a><br />
67               <a>2.6-案例研究——类似淘宝网品牌列表的效果</a><br />
68               <a>2.7-还有其它选择器么？</a><br />
69               <a>2.8-小结</a>
70           </div>
71       </div>
72     
73       <div>
74           <div class="zh">
75             <a>3.1-DOM操作的分类</a><br />
76             <a>3.2-jQuery中的DOM操作</a><br />
77             <a>3.3-案例研究——某网站超链接和图片提示效果</a><br />
78             <a>3.4-小结</a>
79           </div>
80       </div>
81       
82     </div>
83  </div>
84  
85 
86 </body>
87 </html>

View Code

转载于:https://my.oschina.net/jiboping/blog/795946

chongli0987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫