js原生實現選項卡功能
阿新 • • 發佈:2017-06-18
doc pre pan element gre rip class isp height
結構:
<div id="box"> <input type="button" value="書籍" class="on"> <input type="button" value="圖片"> <input type="button" value="專欄"> <div style="display:block;">書籍</div> <div>圖片</div> <div>專欄</div> </div>
樣式:
#box div{ width:200px; height:200px; background:#ccc; display:none; } .on{ color:#fff; background:green; }
選項卡的思路是當我們點擊當前的按鈕的時候,先清空所有的樣式,再給當前的按鈕和盒子添加樣式。
<script> //獲取元素 var oBox = document.getElementById("box"); var aBtn = oBox.getElementsByTagName("input"); var aDiv = oBox.getElementsByTagName("div"); //aBtn是一組元素,所以需要用到for循環 for(var i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ for(var k=0;k<aBtn.length;k++){//先清空所有的樣式 aBtn[k].className =‘‘; aDiv[k].style.display =‘none‘; } //給當前的按鈕和div添加樣式 this.className =‘on‘; aDiv[this.index].style.display =‘block‘; }; } </script>
相關知識點:
index 屬性可返回下拉列表中選項的索引位置
語法:optionObject.index
className 屬性設置或返回元素的 class 屬性。
object.className=classname
js原生實現選項卡功能