js实现选项卡的切换

最新推荐文章于 2023-09-19 10:11:21 发布

java_zhaoyanli

最新推荐文章于 2023-09-19 10:11:21 发布

阅读量2.2k

点赞数 1

分类专栏： myWork--

myWork-- 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

 <!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.οnlοad=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].οnclick=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>