写一个tabs组件
时间: 2023-12-26 18:05:28 浏览: 58
好的,下面是一个简单的 Tabs 组件的实现示例:
HTML:
```html
<div class="tabs">
<div class="tab active" data-tab="tab1">Tab 1</div>
<div class="tab" data-tab="tab2">Tab 2</div>
<div class="tab" data-tab="tab3">Tab 3</div>
<div class="tab" data-tab="tab4">Tab 4</div>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Tab 1 content</div>
<div id="tab2" class="tab-pane">Tab 2 content</div>
<div id="tab3" class="tab-pane">Tab 3 content</div>
<div id="tab4" class="tab-pane">Tab 4 content</div>
</div>
```
CSS:
```css
.tabs {
display: flex;
justify-content: space-between;
align-items: center;
background: #f1f1f1;
padding: 10px;
border-bottom: 1px solid #e0e0e0;
}
.tab {
cursor: pointer;
padding: 10px;
border-radius: 5px 5px 0 0;
background: #ddd;
transition: all 0.3s ease;
}
.tab.active {
background: #fff;
}
.tab-content {
border: 1px solid #e0e0e0;
padding: 10px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
```
JS:
```js
const tabs = document.querySelectorAll(".tab");
const tabContent = document.querySelectorAll(".tab-pane");
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
const tabId = tab.dataset.tab;
tabs.forEach((tab) => tab.classList.remove("active"));
tab.classList.add("active");
tabContent.forEach((tab) => tab.classList.remove("active"));
document.getElementById(tabId).classList.add("active");
});
});
```
这个 Tabs 组件包含一个用于选项卡的容器元素和一个用于显示选项卡内容的容器元素。每个选项卡都是一个带有 data-tab 属性的 div 元素,用于标识与其相关联的选项卡内容。当用户点击选项卡时,JavaScript 将使用 data-tab 属性找到相应的选项卡内容,并将其显示在屏幕上。
以上是一个简单的 Tabs 组件的实现示例,你可以根据自己的需求进行修改和扩展。