1. 程式人生 > >js選項卡程式碼詳解

js選項卡程式碼詳解

**

js選項卡

**

	<body>
		<input type="button" name="" id="btn1" value="選項一" style="background-color: yellow;"/>
		<input type="button" name="" id="btn2" value="選項二"/>
		<input type="button" name="" id="btn3" value="選項三"/>
		<div style="display:block;">1111</div>
		<div>2222</div>
		<div>3333</div>
		
	<script>
		var input1=document.querySelectorAll('input');
		var div1=document.querySelectorAll('div');
		var last=input1[0];//這個變數存的是上一次的物件        

		for(var i=0;i<input1.length;i++){
			
			input1[i].index=i;
			//自定義屬性
				
			input1[i].onclick=function(){
				//把上一次點選物件的背景色去掉
				last.style.background='';
				
				//把上一個對應的div,讓它隱藏
				div1[last.index].style.display='none';
				
				//給當前點選的那個按鈕新增背景色
				this.style.background='yellow';
				
				//讓當前點選的按鈕對應的div,顯示
				div1[this.index].style.display='block';
				
				last=this;//把上一次點選的物件更新成當前點選的物件
			}
		}