选项卡简单版
原生js:
window.onload=function(){ var oBox=document.getElementById("box"); var aInput=oBox.getElementsByTagName('input'); var aDiv=oBox.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=''; aDiv[i].className=''; } this.className='on'; aDiv[this.index].className='active'; } } }
jquery版:
$(function(){ $('#box input').click(function(){ $('#box input').removeClass('on'); $('#box div').hide(); $(this).addClass('on'); $('#box div:eq('+$(this).index()+')').show();//eq的第一种方法 $('#box div').eq($(this).index()).show(); //eq的第二种方法 }); });
jquery简洁版:
$(function(){ $('#box input').click(function(){ $(this).addClass('on').siblings('input').removeClass('on'); //this的兄弟都移除class,属于链式运动 $('#box div:eq('+$(this).index()+')').show().siblings('div').hide(); }); });
人生如戏,或实力或演技