js实现选项卡的切换

 <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>选项卡的切换</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style>    
		.on{ background:#399; color:#fff;}    
		.box div{ width:300px; height:300px; border:1px solid #000; display:none; margin-top:-2px;}    
	</style>    
<script>    
window.onload=function(){    
	var oBox=document.getElementById('box');    
	var aBtn=oBox.getElementsByTagName('input');    
	var aDiv=oBox.getElementsByTagName('div');    
	    
	for(var i=0; i<aBtn.length; i++){    
		aBtn[i].index=i;    
		aBtn[i].onclick=function(){    
			for(var i=0; i<aBtn.length; i++){    
				aBtn[i].className='';    
				aDiv[i].style.display='none';    
			}    
			this.className='on';    
			aDiv[this.index].style.display='block';    
		};    
	}    
};    
</script>    
</head>    
<body>    
<div id="box" class="box">    
	<input class="on" type="button" value="aaa">    
   <input type="button" value="bbb">    
   <input type="button" value="ccc">    
   <div style="display:block;">111</div>    
   <div>222</div>    
   <div>333</div>    
</div>    
</body>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页