选项卡javascript

选项卡选项卡javascript
自用copy
效果

css

<style type="text/css">
		.but11 {
			background: yellow;
		}
		#div1 div {
			width: 100px;
			height: 100px;
			background: #ccc;
			display: none;

		}
	</style>

js

<script type="text/javascript">
	window.onload = function() {
		var obut1 = document.getElementsByTagName('input');
		var odiv1 = document.getElementById('div1');
		var odiv2 = odiv1.getElementsByTagName('div');
			for(var i=0;i<obut1.length;i++)
			{	

				obut1[i].index=i;
				obut1[i].onclick = function() {
					
					for(var i=0;i<obut1.length;i++)

					{	
						obut1[i].className='';
						odiv2[i].style.display= 'none';	
					}
					this.className= 'but11';
					this.style.block = 'block';
					odiv2[this.index].style.display = 'block';
				}
				
			}
	}
	
	</script>

<input type="button" name="" id="but1" value="选项卡1">
	<input type="button" name="" id="but1" value="选项卡2">
	<input type="button" name="" id="but1" value="选项卡3">
	<input type="button" name="" id="but1" value="选项卡4">
	
	<div id="div1">
		<div style="display:block">111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
	
	</div>

有关软件下载，资源查找可以来看看小编的网站，谢谢
网址：www.miaozan.art