<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单选项卡</title> <style> #div1 .active { background: yellow; } #div1 div { width: 200px; height: 200px; background: rgb(130, 231, 116); border: 2px solid black; } </style> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); var oBtns = oDiv1.getElementsByTagName('input'); var allDivs = oDiv1.getElementsByTagName('div'); for (let i = 0; i < oBtns.length; i++) { /* 其实这一行没啥用, 这里给按钮添加的下标是为了给下面的this.index用的, 等价于当前循环变量的值 添加了这一行之后, 是想使用this.index获取当前按钮的自定义属性index的值, 其实就是循环变量i的值 */ oBtns[i].index = i;// 这里的意思就是给按钮添加一个自定义的属性index, 它的值就是i // 给所有的按钮添加点击事件 oBtns[i].onclick = function () { // 因为有可能上面的四个之前已经有了高亮的背景颜色, 表示显示class // 当我们点击别的按钮的时候, 应该将所有的按钮的class = '', 然后再给当前被点击的按钮的背景添加背景 for (let j = 0; j < oBtns.length; j++) { oBtns[j].className = ''; allDivs[j].style.display = 'none'; } // 这里的this, 是js中为我们提供, 当前发生事件的按钮对象 this.className = 'active'; // allDivs[this.index].style.display = 'block'; allDivs[i].style.display = 'block'; // 接下来就是给所有的div的display设置为none, 然后让当前的按钮对应的div显示 /* 我们遇到的问题有这些: 1. 首先我怎么确认显示哪个div, 应该是通过数组下标的形式来确认, 刚好按钮和div是一一对应的关系 */ } } } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育"> <!-- 初始显示的选项卡 --> <input type="button" value="培训"> <input type="button" value="招生"> <input type="button" value="出国"> <div style="display: block;">1111</div> <!-- 这里的是选项卡中初始显示的div --> <div style="display: none;">2222</div> <div style="display: none;">3333</div> <div style="display: none;">4444</div> </div> </body> </html>