用html+css+js写一个tap栏切换,并且每个模块加上注释
时间: 2024-06-01 18:12:42 浏览: 8
<!DOCTYPE html>
<html>
<head>
<title>Tap栏切换</title>
<style>
/* 设置tap栏样式 */
.tap {
display: flex;
background-color: #eee;
padding: 10px;
border-bottom: 1px solid #ccc;
}
/* 设置tap栏选中样式 */
.tap .active {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: none;
}
/* 设置tap栏选项样式 */
.tap div {
cursor: pointer;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 5px 5px 0 0;
}
/* 设置tap栏选项悬停样式 */
.tap div:hover {
background-color: #ddd;
}
/* 设置内容区样式 */
.content {
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tap">
<div class="active" onclick="toggleTab(0)">选项一</div>
<div onclick="toggleTab(1)">选项二</div>
<div onclick="toggleTab(2)">选项三</div>
</div>
<div class="content">
<div id="tab1">
<h2>选项一内容</h2>
<p>这是选项一的内容,可以根据自己的需求添加任意元素和样式。</p>
</div>
<div id="tab2" style="display:none;">
<h2>选项二内容</h2>
<p>这是选项二的内容,可以根据自己的需求添加任意元素和样式。</p>
</div>
<div id="tab3" style="display:none;">
<h2>选项三内容</h2>
<p>这是选项三的内容,可以根据自己的需求添加任意元素和样式。</p>
</div>
</div>
<script>
// 定义toggleTab函数,用于切换选项卡
function toggleTab(tabIndex) {
// 获取所有选项卡元素
var tabs = document.querySelectorAll('.content > div');
// 获取所有选项元素
var tapItems = document.querySelectorAll('.tap > div');
// 遍历所有选项卡元素,将选中的选项卡显示,其他卡片隐藏
for (var i = 0; i < tabs.length; i++) {
if (i === tabIndex) {
tabs[i].style.display = '';
tapItems[i].classList.add('active');
} else {
tabs[i].style.display = 'none';
tapItems[i].classList.remove('active');
}
}
}
</script>
</body>
</html>
注释:
1. 定义tap栏样式
2. 定义tap栏选中样式
3. 定义tap栏选项样式
4. 定义tap栏选项悬停样式
5. 定义内容区样式
6. 定义tap栏选项,其中第一个选项默认选中,并绑定点击事件
7. 定义内容区,其中每个选项卡对应一个div元素,其中第一个选项卡的div元素默认显示
8. 定义toggleTab函数,用于切换选项卡
9. 获取所有选项卡元素和所有选项元素
10. 遍历所有选项卡元素,将选中的选项卡显示,其他卡片隐藏