选项卡实现
css和html：
<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<body>
<div id="div1" style="border:1px solid red">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>
1、
找到3个button按钮的元素集合，添加click事件；js的话只能用循环给每一个加事件；
$('#div1').find('input').click(function(){
2、将3个button的class置空，相应的内容div，display=“none”；
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
3、获得单击哪个button对象，将其设置为class=“active”；并将相应的div，display=“block”；
$(this).attr('class','active'); $('#div1').find('div').eq( $(this).index() ).css('display','block');
注意：css样式初始将不显示的div，display="none";就会自动隐藏，并且不占位置；
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1 div{ width:200px; height:200px; border:1px red solid; display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> /*window.onload = function(){ var oDiv = document.getElementById('div1'); var aInput = oDiv.getElementsByTagName('input'); var aCon = oDiv.getElementsByTagName('div'); for(var i=0;i<aInput.length;i++){ aInput[i].index = i; aInput[i].onclick = function(){ for(var i=0;i<aInput.length;i++){ aInput[i].className = ''; aCon[i].style.display = 'none'; } this.className = 'active'; aCon[this.index].style.display = 'block'; }; } };*/ $(function(){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none'); $(this).attr('class','active'); $('#div1').find('div').eq( $(this).index() ).css('display','block'); }); }); </script> </head> <body> <div id="div1" style="border:1px solid red"> <input class="active" type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <div style="display:block">111111</div> <div>222222</div> <div>333333</div> </div> </body> </html>
