jQuery-tab3

浏览数：22 / 时间：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>Document</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 .current0{
 37 background: #abcdef;
 38 color:#fff;
 39 }
 40  
 41 .current1{
 42 background: red;
 43 color:teal;
 44 }
 45  
 46 .current2{
 47 background: green;
 48 color:yellow;
 49 }
 50  
 51 .tabContent div{
 52 border:1px solid #f60;
 53 width: 300px;
 54 height: 250px;
 55 padding:15px;
 56 }

 57 </style>
 58 <script type="text/javascript">
 59  
 60 $(function(){
 61 var ali = $(‘.tabTitle ul li‘);
 62 var aDiv = $(‘.tabContent div‘);
 63 var timeId = null;
 64 ali.mouseover(function(){
 65  
 66 var _this = $(this);
 67 //setTimeout();的作用是延迟某一段代码的执行
 68 timeId = setTimeout(function(){
 69  
 70 //alert($);
 71 //$(this)方法属于哪个元素，$(this)就是哪个元素
 72 _this.addClass(function(){
 73 return ‘current‘+_this.index();
 74 }).siblings().removeClass();
 75  
 76 //如果想用一组元素控制另一组的元素显示或者隐藏，需要用到索引
 77 var index = _this.index();
 78  
 79 aDiv.eq(index).show().siblings().hide();
 80  
 81  
 82 },300);
 83  
 84  
 85  
 86  
 87 }).mouseout(function(){
 88 //cleatTimeout的作用是清除定时器
 89 clearTimeout(timeId);
 90 });
 91  
 92 //setInterval
 93 });
 94 </script>
 95 </head>
 96 <body>
 97  
 98 <div class="tabTitle">
 99 <ul>
100 <li class="current0">xhtml</li>
101 <li>css</li>
102 <li>jquery</li>
103 </ul>
104 </div>
105  
106 <div class="tabContent">
107 <div>xhtml的内容</div>
108 <div class="hide">css的内容</div>
109 <div class="hide">jquery的内容</div>
110 </div>
111  
112 </body>
113 </html>