個人js學習例項-點選按鈕實現按鈕背景色變化以及相對應的div變化
阿新 • • 發佈：2018-12-24
效果：
程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 400px; margin:100px auto; border:1px solid #ccc; text-align: center; } .top{ margin: 10px 0; } .bottom div{ width:100%; height: 300px; padding-top: 30px; background-color: red; font-size: 20px; font-weight: 600; color: #ffffff; display: none; } .red { background-color: red; color: #ffffff; } </style> <script> window.onload = function(){ // 獲取6個按鈕賦給陣列btns var btns = document.getElementsByTagName("button"); // 獲取id為divs中6個div賦給陣列divs var divs = document.getElementById("divs").getElementsByTagName("div"); // for迴圈遍歷btns for(var i=0;i<btns.length;i++) { //得到當前btn在陣列的的索引號 btns[i].index = i; // 難點 btns[i].onclick = function(){ //讓所有的 btn 類名清空 //alert(this.index); for(var j=0;j<btns.length;j++) { btns[j].className = ""; } // 當前的那個按鈕 的新增 類名 this.className = "red"; //先隱藏所有的 div盒子 for(var i=0;i<divs.length;i++) { divs[i].style.display = "none"; } // 留下與按鈕相對應的div,既當前按鈕序號有關 divs[this.index].style.display ="block"; } } } </script> </head> <body> <div class="box"> <div class="top"> <button>第一個</button> <button>第二個</button> <button>第三個</button> <button>第四個</button> <button>第五個</button> </div> <div class="bottom" id="divs"> <div style="display: block;">盒子1</div> <div>盒子2</div> <div>盒子3</div> <div>盒子4</div> <div>盒子5</div> </div> </div> </body> </html>