jquery-tab1

浏览数：65 / 时间：2015年06月09日

 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" xml:lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5 <title>jQuery-tab1</title>
 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 7 <style type="text/css">
 8 *{padding:0;margin:0;}
 9 li{
10 list-style-type: none;
11  
12 }
13 body{
14 margin:50px;
15 }
16  
17 .hide{
18 display: none;
19 }
20  
21 .tabTitle ul{
22 overflow: hidden;
23 _height:1px;
24 }
25 .tabTitle ul li{
26 float: left;
27 border: 1px solid #abcdef;
28 border-bottom: none;
29 height: 30px;
30 line-height: 30px;
31 padding:0 15px; 
32 margin-right: 3px;
33 cursor: pointer;
34 }
35  
36 .current{
37 background: #abcdef;
38 color:#fff;
39 }
40  
41 .tabContent div{
42 border:1px solid #f60;
43 width: 300px;
44 height: 250px;
45 padding:15px;
46 }
47 </style>
48 <script type="text/javascript">
49  
50 $(function(){
51 var ali = $(‘.tabTitle ul li‘);
52 var aDiv = $(‘.tabContent div‘);
53 ali.click(function(){
54 //alert($);
55 //$(this)就是当前元素
56 $(this).addClass(‘current‘).siblings().removeClass(‘current‘);
57  
58 //如果想用一组元素控制另一组的元素显示或者隐藏，需要用到索引
59 var index = $(this).index();
60  
61 aDiv.eq(index).show().siblings().hide();
62 });
63 });
64 </script>
65 </head>
66 <body>
67  
68 <div class="tabTitle">
69 <ul>
70 <li class="current">xhtml</li>
71 <li>css</li>
72 <li>jquery</li>
73 </ul>
74 </div>
75  
76 <div class="tabContent">
77 <div>xhtml的内容</div>
78 <div class="hide">css的内容</div>
79 <div class="hide">jquery的内容</div>
80 </div>
81  
82 </body>
83 </html>
84 
85 
86 click可以换成其他事件比如：mouseover 等.