设计实现标签栏切换效果页面。要求写出样式代码和脚本代码
时间: 2024-05-16 09:12:48 浏览: 17
以下是一个基本的标签栏切换效果页面的样式和脚本代码:
HTML 代码:
```
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">标签 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">标签 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">标签 3</button>
</div>
<div id="tab1" class="tabcontent">
<h3>标签 1 内容</h3>
<p>这是标签 1 的内容区域。</p>
</div>
<div id="tab2" class="tabcontent">
<h3>标签 2 内容</h3>
<p>这是标签 2 的内容区域。</p>
</div>
<div id="tab3" class="tabcontent">
<h3>标签 3 内容</h3>
<p>这是标签 3 的内容区域。</p>
</div>
```
样式代码:
```
/* 隐藏所有标签内容区域 */
.tabcontent {
display: none;
}
/* 标签栏样式 */
.tab button {
background-color: #f2f2f2;
border: none;
color: black;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* 激活状态的标签样式 */
.tab button.active {
background-color: #ccc;
}
/* 标签内容区域样式 */
.tabcontent {
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
```
脚本代码:
```
function openTab(evt, tabName) {
// 获取所有标签内容区域
var tabcontent = document.getElementsByClassName("tabcontent");
// 隐藏所有标签内容区域
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// 获取所有标签按钮
var tablinks = document.getElementsByClassName("tablinks");
// 移除所有标签按钮的激活状态
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// 显示当前标签内容区域并激活当前标签按钮
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
```
以上代码实现了一个简单的标签栏切换效果页面。当用户点击标签按钮时,相应的标签内容区域会显示出来,其他标签内容区域会隐藏起来。同时,被点击的标签按钮会变成激活状态,其他标签按钮则取消激活状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)