首页 > Web开发 > 详细

tab切换 jquery

时间:2014-08-12 21:36:54      阅读:393      评论:0      收藏:0      [点我收藏+]

标签:class   style   代码   java   html   src   com   js   

 核心代码:

$(‘#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‘);
  });

bubuko.com,布布扣
  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>
View Code

tab切换 jquery,布布扣,bubuko.com

tab切换 jquery

标签:class   style   代码   java   html   src   com   js   

原文:http://www.cnblogs.com/dashen/p/3908303.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号