请用html编写一个简单的选项卡界面
时间: 2023-08-01 19:11:33 浏览: 43
好的,以下是一个简单的选项卡界面的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<style>
/* 设置选项卡选中和未选中的样式 */
.tab {
display: none;
}
.tab.active {
display: block;
}
.tab-btn {
background-color: #ccc;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
}
.tab-btn.active {
background-color: #555;
}
</style>
</head>
<body>
<!-- 选项卡按钮 -->
<button class="tab-btn active" onclick="openTab(event, 'tab1')">选项卡1</button>
<button class="tab-btn" onclick="openTab(event, 'tab2')">选项卡2</button>
<button class="tab-btn" onclick="openTab(event, 'tab3')">选项卡3</button>
<!-- 选项卡内容 -->
<div id="tab1" class="tab active">
<h2>选项卡1内容</h2>
<p>这是选项卡1的内容。</p>
</div>
<div id="tab2" class="tab">
<h2>选项卡2内容</h2>
<p>这是选项卡2的内容。</p>
</div>
<div id="tab3" class="tab">
<h2>选项卡3内容</h2>
<p>这是选项卡3的内容。</p>
</div>
<script>
function openTab(evt, tabName) {
// 获取所有选项卡内容和按钮
var tabs = document.getElementsByClassName("tab");
var tabBtns = document.getElementsByClassName("tab-btn");
// 隐藏所有选项卡内容和取消选中所有按钮
for (var i = 0; i < tabs.length; i++) {
tabs[i].className = tabs[i].className.replace(" active", "");
}
for (var i = 0; i < tabBtns.length; i++) {
tabBtns[i].className = tabBtns[i].className.replace(" active", "");
}
// 显示选中的选项卡内容和选中按钮
document.getElementById(tabName).className += " active";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
```
以上代码将会生成一个拥有三个选项卡的界面。用户可以点击不同的选项卡按钮来切换选项卡,每个选项卡都有自己的内容。当一个选项卡被选中时,其对应的按钮会变成选中状态,同时显示该选项卡的内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)