用es6写选项卡点击切换
时间: 2024-05-11 16:13:39 浏览: 5
HTML:
```
<div class="tab">
<div class="tab-header">
<div class="tab-item active">Tab 1</div>
<div class="tab-item">Tab 2</div>
<div class="tab-item">Tab 3</div>
</div>
<div class="tab-content">
<div class="tab-pane active">Content for Tab 1</div>
<div class="tab-pane">Content for Tab 2</div>
<div class="tab-pane">Content for Tab 3</div>
</div>
</div>
```
CSS:
```
.tab {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
}
.tab-header {
display: flex;
}
.tab-item {
padding: 10px;
border-right: 1px solid #ccc;
cursor: pointer;
&:last-child {
border-right: none;
}
&.active {
background-color: #ccc;
}
}
.tab-content {
padding: 10px;
}
.tab-pane {
display: none;
&.active {
display: block;
}
}
```
ES6:
```
const tabItems = document.querySelectorAll('.tab-item');
const tabPanes = document.querySelectorAll('.tab-pane');
tabItems.forEach(item => {
item.addEventListener('click', () => {
const currentTab = document.querySelector(`.${item.dataset.tab}`);
tabItems.forEach(item => {
item.classList.remove('active');
});
tabPanes.forEach(pane => {
pane.classList.remove('active');
});
item.classList.add('active');
currentTab.classList.add('active');
});
});
```
注意:HTML中的每个tab-item都必须具有一个data-tab属性,其值应为相应tab-pane的类名。例如,第一个tab-item应该具有data-tab="tab-pane1",而第一个tab-pane应该具有类名"tab-pane tab-pane1"。