<!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选项卡的一种方式，如果大家有其他方法，欢迎评论区讨论。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/137247569