### 实现或自定义
Tab 切换选项卡的样式
#### 使用
HTML 和 CSS 基础布局
HTML 结构通常由导航部分 `.nav` 和内容容器 `.nav_con` 组成。通过浮动属性 `float:left` 将导航
项排列在同一行[^1]。为了美观，可以通过设置宽度、高度以及背景颜色来增强视觉效果。
```
html
<div class="nav">
<a href="#" data-index="0">
Tab 1</a>
<a href="#" data-index="1">
Tab 2</a>
<a href="#" data-index="2">
Tab 3</a>
</div>
<div class="nav_con">
<div>Content of
Tab 1</div>
<div style="display:none;">Content of
Tab 2</div>
<div style="display:none;">Content of
Tab 3</div>
</div>
```
CSS 部分用于控制基本样式和隐藏未选中的内容：
```css
.nav a {
text-decoration: none;
width: 180px;
height: 30px;
line-height: 30px;
text-align: center;
color: #666;
float: left;
margin-right: 15px;
background-color: beige;
}
.nav a:hover, .nav a.active {
background-color: blue;
color: white;
}
.nav_con div:not(:first-child) {
display: none;
}
```
上述代码设置了默认显示第一个
tab 的内容，并隐藏其他内容。
---
#### 添加交互功能 (JavaScript)
通过 JavaScript 动态
切换激活状态并更新可见的内容区域。以下是完整的 JS 实现逻辑：
```javascript
document.querySelectorAll('.nav a').forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault(); // 阻止默认行为
const index = this.getAttribute('data-index');
// 移除当前 active 类名
document.querySelector('.nav a.active')?.classList.remove('active');
this.classList.add('active'); // 设置新的 active 状态
// 更新内容区显示
document.querySelectorAll('.nav_con div').forEach((content, i) => {
if (i === parseInt(index)) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});
});
```
此脚本监听点击事件，动态更改活动标签的状态，并同步调整对应的内容展示。
---
#### 进一步优化与扩展
如果希望支持更多高级特性（如动画过渡），可以引入 CSS 转场效果或者使用现代框架简化开发流程。例如，在 Vue.js 中实现类似的组件结构如下所示：
```vue
<template>
<div>
<ul class="nav">
<li v-for="(item, idx) in
tabs" :key="idx">
<a @click="select
Tab(idx)" :class="{ active: currentIdx === idx }">{{ item }}</a>
</li>
</ul>
<div class="nav_con">
<slot name="
tab-content"></slot>
</div>
</div>
</template>
<script>
export default {
props: ['
tabs'],
data() {
return { currentIdx: 0 };
},
methods: {
select
Tab(idx) {
this.currentIdx = idx;
}
}
};
</script>
```
Vue 提供了更灵活的方式管理状态变化，适合构建复杂的用户界面[^2]。
---
#### 性能考虑
对于大规模
项目，建议减少 DOM 操作频率以提升性能。例如，预先计算所有可能的变化情况并通过类绑定完成渲染操作，而非频繁调用 `style.display` 属性修改。
---
扫一扫
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
