html5滑动tab切换
时间: 2023-07-18 22:43:55 浏览: 53
HTML5 滑动 Tab 切换可以通过 CSS 和 JavaScript 实现。以下是一个简单的示例代码:
HTML 代码:
```
<div class="tab-container">
<div class="tab-navigation">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="tab-content">
<div class="tab-panel">Tab 1 content</div>
<div class="tab-panel">Tab 2 content</div>
<div class="tab-panel">Tab 3 content</div>
</div>
</div>
```
CSS 代码:
```
.tab-container {
position: relative;
}
.tab-navigation {
display: flex;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
cursor: pointer;
}
.tab.active {
font-weight: bold;
}
.tab-content {
position: relative;
height: 200px;
overflow: hidden;
}
.tab-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tab-panel.active {
opacity: 1;
}
```
JavaScript 代码:
```
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.tab-panel');
function activateTab(index) {
tabs.forEach(tab => {
tab.classList.remove('active');
});
panels.forEach(panel => {
panel.classList.remove('active');
});
tabs[index].classList.add('active');
panels[index].classList.add('active');
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
activateTab(index);
});
});
activateTab(0);
```
通过以上代码,我们实现了一个简单的 HTML5 滑动 Tab 切换。点击不同的 Tab 可以切换到相应的内容。
相关推荐
![](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)