帮我写一份学习强国选项卡菜单代码制作
时间: 2024-09-12 22:08:33 浏览: 50
安卓期末课程设计、一款仿学习i强国的强国通App 包含源代码、使用手册和心得体会
5星 · 资源好评率100%
创建一个学习强国的选项卡菜单通常涉及到HTML、CSS和JavaScript,这里是一个简单的示例,展示如何用纯静态的方式模拟一个基本的选项卡结构,实际应用中可能需要配合API交互:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.tab-container {
display: flex;
justify-content: space-between;
padding: 10px;
}
.tab {
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
cursor: pointer;
width: calc(50% - 10px);
transition: background-color 0.3s ease;
}
.tab:hover {
background-color: #e0e0e0;
}
.active-tab {
background-color: #ddd;
font-weight: bold;
}
.tabpanel {
display: none;
padding: 10px;
border-top: 1px solid #ccc;
}
.active-tab ~ .tabpanel {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<button class="tab active-tab" onclick="changeTab(1)">选项卡1</button>
<button class="tab" onclick="changeTab(2)">选项卡2</button>
<!-- 添加更多按钮... -->
</div>
<div class="tabpanel" id="tab1">
<p>这是选项卡1的内容...</p>
</div>
<div class="tabpanel" id="tab2">
<p>这是选项卡2的内容...</p>
</div>
<script>
function changeTab(tabIndex) {
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active-tab');
}
document.getElementById('tab' + tabIndex).classList.add('active-tab');
// 如果有联动内容,切换对应的tabpanel
var panes = document.getElementsByClassName('tabpanel');
for (var i = 0; i < panes.length; i++) {
panes[i].style.display = 'none';
}
document.getElementById('tab' + tabIndex + '-pane').style.display = 'block';
}
</script>
</body>
</html>
```
阅读全文