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 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
7
8 <script type="text/javascript">
9 $(function () {
10 $(".boxBar li").mousemove(function () {
11 $(".boxBar li.first").removeClass('first');
12 $(this).addClass('first');
13 $(".boxBody div.a").removeClass('a');
14 $(".boxBody div").eq($(this).index()).addClass('a');
15
16 });
17 })
18 </script>
19
20 <style>
21 body{ margin:0; padding:0;}
22 .Flash{ width:500px; height:260px;}
23 .boxBar{width:500px; height:30px;}
24 .boxBar li{width:45px; height:30px; float:left; background-color:#EEE; color:#333;margin-left:6px; line-height:30px;list-style-type:none;text-align:center;font-size:14px; font-family:Microsoft Yahei;}
25 .boxBar li.first{background-color:#ca0002; color:#FFF;}
26 #FiA{margin-left:0px;}
27 .boxBody div{width:500px; height:230px; display:none; background-color:#CCC;}
28 .boxBody div.a{display:block;}
29 .boxBody img{ padding-top:7px;}
30 </style>
31 </head>
32 <body>
33 <div class="Flash">
34 <div class="boxBar">
35 <ul>
36 <li id="FiA" class="first">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
37 </ul>
38 </div>
39 <div class="boxBody">
40 <div class="a">
41 <a href="#">我是第一</a></div>
42 <div>
43 <a href="#">我是第二</a></div>
44 <div>
45 <a href="#">我是第三</a></div>
46 <div>
47 <a href="#">我是第四</a></div>
48 <div>
49 <a href="#">我是第五</a></div>
50 <div>
51 <a href="#">我是第六</a></div>
52 </div>
53 </div>
54 </body>
55 </html>
View Code
3162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
