原生html写tab页,原生JS选项卡(Tab页切换)
时间: 2023-07-28 11:17:10 浏览: 51
好的,我可以为您提供一个基本的示例代码,您可以根据自己的需要进行修改和优化。
HTML代码:
```html
<div class="tabs">
<div class="tab-header">
<div class="tab-item active" data-tab="tab1">Tab 1</div>
<div class="tab-item" data-tab="tab2">Tab 2</div>
<div class="tab-item" data-tab="tab3">Tab 3</div>
</div>
<div class="tab-content">
<div class="tab-pane active" data-tab="tab1">
<p>这是第一个选项卡的内容。</p>
</div>
<div class="tab-pane" data-tab="tab2">
<p>这是第二个选项卡的内容。</p>
</div>
<<div class="tab-pane" data-tab="tab3">
<p>这是第三个选项卡的内容。</p>
</div>
</div>
</div>
```
CSS代码:
```css
.tabs {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
.tab-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
.tab-item {
padding: 10px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-item.active {
border-bottom-color: #000;
}
.tab-content .tab-pane {
display: none;
padding: 10px;
}
.tab-content .tab-pane.active {
display: block;
}
```
JS代码:
```js
const tabItems = document.querySelectorAll('.tab-item');
const tabPanes = document.querySelectorAll('.tab-pane');
tabItems.forEach(item => {
item.addEventListener('click', () => {
const activeTab = item.dataset.tab;
tabItems.forEach(item => {
item.classList.remove('active');
});
tabPanes.forEach(pane => {
pane.classList.remove('active');
if (pane.dataset.tab === activeTab) {
pane.classList.add('active');
}
});
item.classList.add('active');
});
});
```
这段代码会为每个选项卡标签添加一个点击事件监听器,当点击标签时,它会将所有标签和内容面板的活动类移除,然后添加活动类到当前点击的标签和对应的内容面板上。
相关推荐
![](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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)