求一个选项卡js，浮动切换，越简单越好
1个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
body {
margin: 0;
padding: 0;
}
.tab-wrap {
display: flex;
width: 300px;
justify-content: space-between;
background-color: beige;
}
.content {
display: none;
}
.content:first-child {
display: block;
}
</style>
</head>
<body>
<div>
<div class="tab-wrap">
<div class="tab">选项卡1</div>
<div class="tab">选项卡2</div>
<div class="tab">选项卡3</div>
</div>
<div class="content-wrap">
<div class="content">选项卡1的内容</div>
<div class="content">选项卡2的内容</div>
<div class="content">选项卡3的内容</div>
</div>
</div>
</body>
<script>
let num = 0;
document.querySelectorAll(".tab").forEach((item, index) => {
item.onmouseover = () => {
document.querySelectorAll(".content")[num].style.display = "none";
num = index;
document.querySelectorAll(".content")[num].style.display = "block";
}
})
</script>
</html>
请采纳
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
