<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; list-style: none; } #box1{ width:500px; height:500px; border:1px solid red; } #box1 input{ background: yellow; } #box1 .active{ background: red; } #box1 div{ width:300px; height:300px; background: red; font-size: 50px; text-align: center; line-height: 300px; display: none; } #box1 .show{ display: block; } </style></head><body> <div id="box1"> <input type="button" value="按钮1" class="active"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <div class="show">1</div> <div>2</div> <div>3</div> </div> <script> var oBox = document.getElementById(‘box1‘); var aBtn = oBox.getElementsByTagName(‘input‘); var aBox = oBox.getElementsByTagName(‘div‘); for(var i=0; i<aBtn.length; i++){ aBtn[i].index = i; aBtn[i].onclick = function () { for(var i=0; i<aBtn.length; i++){ aBtn[i].className = ‘‘; aBox[i].className = ‘‘; } aBox[this.index].className = ‘show‘; this.className = ‘active‘; } } </script></body></html>
时间： 2024-08-28 12:00:35