<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡</title> <style> * { margin: 0; padding: 0; } button { width: 50px; height: 50px; } .but { width: 200px; height: 80px; margin: auto; } #china { width: 500px; height: 300px; background-color: aquamarine; margin: auto; text-align: center; } #math { width: 500px; height: 300px; background-color: chocolate; margin: auto; text-align: center; display: none; } #english1 { width: 500px; height: 300px; background-color: cornflowerblue; margin: auto; text-align: center; display: none; } </style> </head> <body> <div class="but"> <button class="meau-one" onclick="fun1()"> 菜单一</button> <button class="meau-two" onclick="fun2()"> 菜单二</button> <button class="meau-three" onclick="fun4()"> 菜单三</button> </div> <div id="china"> 语文 </div> <div id="math"> 数学 </div> <div id="english1"> 英语 </div> </body> <script> let on1 = document.getElementById("china"); let on2 = document.getElementById("math"); let on3 = document.getElementById("english1"); function fun1() { on1.style.display = 'block'; on2.style.display = 'none'; on3.style.display = 'none'; } function fun2() { on1.style.display = 'none'; on3.style.display = 'none'; on2.style.display = 'block'; } function fun4() { on1.style.display = 'none'; on2.style.display = 'none'; on3.style.display = 'block'; } </script> </html>
上面所述是实现JS选项卡的一种方式，如果大家有其他方法，欢迎评论区讨论。
