<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> #coa { display: flex; justify-content: center; } #coa div { width: 90px; height: 70px; background-color: pink; margin: 10px; text-align: center; line-height: 60px; } #cob { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 100px; } #cob div { width: 500px; height: 400px; } #coa .active { background-color:yellow; } #coa .active{ color:red; } </style> <body> <div id="coa"> <div class="active">选项1</div> <div>选项2</div> <div>选项3</div> </div> <div id="cob"> <div style="background-color:#55ffff" ;>内容1</div> <div style="background-color:#aaaaff;display:none" ;>内容2</div> <div style="background-color:#00f0b0;display:none" ;>内容3</div> </div> <script> let coalist = document.getElementById("coa"); let coa = coalist.children; let coblist = document.getElementById("cob"); let cob = coblist.children; for (let i = 0; i < coa.length; i++) { coa[i].onclick = function() { for (let j = 0; j < coa.length; j++) { coa[j].className = ''; cob[j].style.display = 'none'; } coa[i].className = 'active'; cob[i].style.display = 'block'; } } </script> </body> </html>
