tab切换不同内容

View Code 
 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>

 

posted @ 2013-02-04 08:52  晓 漪  阅读(715)  评论(0)    收藏  举报