js選項卡程式碼詳解
阿新 • • 發佈:2018-12-28
**
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;//把上一次點選的物件更新成當前點選的物件 } }