<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.option {
width: 100%;
display: flex;
justify-content: center;
}
.option_one {
background-color: red;
}
.option_two {
background-color: aqua;
}
.option_three {
background-color: aqua;
}
.content {
width: 100%;
display: flex;
justify-content: center;
}
.content_one {
width: 300px;
height: 300px;
background-color: saddlebrown;
}
.content_two {
width: 300px;
height: 300px;
display: none;
background-color: darkgoldenrod;
}
.content_three {
width: 300px;
height: 300px;
display: none;
background-color: sandybrown;
}
</style>
<body>
<div class="option">
<p class="option_one">选项卡1</p>
<p class="option_two">选项卡2</p>
<p class="option_three">选项卡3</p>
</div>
<div class="content">
<p class="content_one">艾瑞巴</p>
<p class="content_two">嗨起来</p>
<p class="content_three">芜湖</p>
</div>
<script>
let i = document.getElementsByClassName('option_one')[0];
let s = document.getElementsByClassName('option_two')[0];
let k = document.getElementsByClassName('option_three')[0];
let o = document.getElementsByClassName('content_one')[0];
let m = document.getElementsByClassName('content_two')[0];
let n = document.getElementsByClassName('content_three')[0];
i.onclick = function() {
i.style.backgroundColor = 'red';
s.style.backgroundColor = 'aqua';
k.style.backgroundColor = 'aqua';
o.style.display = 'block';
m.style.display = 'none';
n.style.display = 'none';
}
s.onclick = function() {
i.style.backgroundColor = 'aqua';
s.style.backgroundColor = 'red';
k.style.backgroundColor = 'aqua';
o.style.display = 'none';
m.style.display = 'block';
n.style.display = 'none';
}
k.onclick = function() {
i.style.backgroundColor = 'aqua';
s.style.backgroundColor = 'aqua';
k.style.backgroundColor = 'red';
o.style.display = 'none';
m.style.display = 'none';
n.style.display = 'block';
}
</script>
</body>
</html>
JavaScript选项卡
最新推荐文章于 2024-09-11 22:31:16 发布