这里有3个按钮，点击哪个按钮出现哪个按钮的内容，再点的话内容的就取消了。这也是一个很好玩的一个小功能。
CSS：
<style> #text1{ width: 200px; height: 200px; display: none; background-color: orangered; } #text2{ width: 200px; height: 200px; display: none; background-color: hotpink; } #text3{ width: 200px; height: 200px; display: none; background-color: blue; } </style>
HTML：
<div> <button id="button1" onclick="fun(1)">按钮1</button> <button id="button2" onclick="fun(2)">按钮2</button> <button id="button3" onclick="fun(3)">按钮3</button> </div> <div id="text1">按钮1内容</div> <div id="text2">按钮2内容</div> <div id="text3">按钮3内容</div>
JS：
<script> let on1 = document.getElementById("text1") let on2 = document.getElementById("text2") let on3 = document.getElementById("text3") function fun(cf) { if (cf == 1) { if (on2.style.display == "block" || on3.style.display == "block") { on2.style.display = "none" on3.style.display = "none" } if (on1.style.display == "block"){ on1.style.display = "none" }else { on1.style.display = "block" } } if (cf == 2) { if (on1.style.display == "block" || on3.style.display == "block") { on1.style.display = "none" on3.style.display = "none" } if (on2.style.display == "block"){ on2.style.display = "none" }else { on2.style.display = "block" } } if (cf == 3) { if (on1.style.display == "block" || on2.style.display == "block") { on1.style.display = "none" on2.style.display = "none" } if (on3.style.display == "block"){ on3.style.display = "none" }else { on3.style.display = "block" } } } </script>
还有另一种通俗易懂的方式：
CSS:
<style> #text1{ width: 200px; height: 200px; display: block; background-color: orangered; } #text2{ width: 200px; height: 200px; display: none; background-color: hotpink; } #text3{ width: 200px; height: 200px; display: none; background-color: blue; } </style>
HTML：
<div> <button id="button1" onclick="yi()">按钮1</button> <button id="button2" onclick="er()">按钮2</button> <button id="button3" onclick="san()">按钮3</button> </div>
JS:
let on1 = document.getElementById("text1") let on2 = document.getElementById("text2") let on3 = document.getElementById("text3") function yi() { on1.style.display = 'block' on2.style.display = 'none' on3.style.display = 'none' } function er() { on1.style.display = 'none' on3.style.display = 'none' on2.style.display = 'block' } function san() { on1.style.display = 'none' on2.style.display = 'none' on3.style.display = 'block' }
以上就是本次的选项卡的功能介绍了,有不足的地方请大家多多指点
