首页 > 代码库 > tab切换 jquery
tab切换 jquery
核心代码：
$(‘#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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。