tab切换 jquery

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

核心代码：

$(‘#top li‘).click(function(){
   var index=$(‘#top li‘).index(this);
   $(‘#top li:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘li‘).removeClass(‘cur‘);
   $(‘#content div:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘div‘).removeClass(‘cur‘);
  });

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7     body{
  8         padding:0;
  9         margin:0;
 10         font:"微软雅黑 Light" 21px;
 11     }
 12     #top{
 13     }
 14     ul{
 15         list-style:none;
 16         margin:0;
 17         display:block;
 18         margin-top:10px;
 19     }
 20     #top ul li{
 21         display:block;
 22         float:left;
 23         width:96px;
 24         text-align:center;
 25         border:2px #A30BCC solid;
 26         cursor:pointer;
 27     }
 28     #top ul li.cur{
 29         border-bottom:none;
 30     }
 31     #content{
 32         clear:both;
 33         width:400px;
 34         height:300px;
 35         background:#84BEDB;
 36         margin-left:41px;
 37     }
 38     #content div{
 39         display:none;
 40     }
 41     #content div.cur{
 42         display:block;
 43     }
 44 </style>
 45 <script src="../jquery-2.1.1.js" type="text/javascript"></script>
 46 <script>
 47     $(function(){
 48         //:first-child 选择器选取属于其父元素的第一个子元素，是一个集合
 49         //:first选择器选取的是所有中的唯一的一个
 50         //$(‘#top ul li:first-child‘).css(‘background‘,‘#39F015‘);
 51         //$(‘#top ul li:nth-child(odd)‘).css(‘font-weight‘,‘bolder‘);
 52         
 53         /*var d = $(‘#content‘).contents();
 54         //alert(d.size())
 55         d.each(function(index, element) {
 56             if(element.nodeName=="DIV"){//必须是大写，受不了
 57                 $(this).css(‘background‘,‘#53E77F‘);
 58             }
 59         });
 60         */
 61         
 62         /*
 63         $(‘#top ul li‘).filter(function(index) {
 64             if($(this).attr(‘class‘)==‘cur‘)
 65                 return $(this);
 66             return null;
 67         }).css(‘background‘,‘#39F015‘);
 68         *////
 69         
 70         //$(‘#top ul li‘).filter(‘.cur‘).css(‘background‘,‘#39F015‘);
 71         
 72         
 73         $(‘#top li‘).click(function(){
 74             var index=$(‘#top li‘).index(this);
 75             $(‘#top li:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘li‘).removeClass(‘cur‘);
 76             $(‘#content div:eq(‘+index+‘)‘).addClass(‘cur‘).siblings(‘div‘).removeClass(‘cur‘);
 77         });
 78         
 79     })
 80 </script>
 81 </head>
 82 
 83 <body>
 84 <div>
 85     <div id="top">
 86         <ul>
 87             <li class="cur">曹**</li>
 88             <li>张*</li>
 89             <li>彭**</li>
 90             <li>廖*</li>
 91         </ul>
 92     </div>
 93     <div id="content">
 94          <div class="cur">黑傻子</div>
 95         <div>胖二子</div>
 96         <div>白妹纸</div>
 97         <div>萌妹纸</div>
 98     </div>
 99 </div>
100 </body>
101 </html>