Swift实现纯文本顶部自定义Tab Bar：点击切换颜色并加下划线

没问题！我刚好做过类似的纯文本Tab Bar效果，给你一套完整的实现方案，直接就能用，还兼顾了交互体验和语义化👇

1. HTML结构（语义化布局） #

首先用<div>做Tab Bar容器，里面用<button>来做每个Tab项（比用<span>更符合语义，对屏幕阅读器更友好），同时可以加上对应的内容面板，让整个Tab组件完整：

<div class="tab-container">
  <!-- 顶部Tab Bar -->
  <div class="tab-bar">
    <button class="tab-item active">首页</button>
    <button class="tab-item">发现</button>
    <button class="tab-item">我的</button>
    <button class="tab-item">设置</button>
  </div>
  
  <!-- 对应的内容面板 -->
  <div class="tab-content">
    <div class="content-item active">首页内容区域</div>
    <div class="content-item">发现内容区域</div>
    <div class="content-item">我的内容区域</div>
    <div class="content-item">设置内容区域</div>
  </div>
</div>

2. CSS样式（实现点击变色+下划线效果） #

核心是用.active类来标记选中状态，配合CSS过渡实现平滑动画，同时重置按钮的默认样式让它看起来像纯文本：

/* 全局重置，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tab-container {
  max-width: 800px;
  margin: 20px auto;
}

/* Tab Bar 布局 */
.tab-bar {
  display: flex;
  gap: 30px; /* 控制Tab项之间的间距 */
  border-bottom: 1px solid #eee; /* 可选：底部加一条分隔线 */
  padding: 10px 0;
}

/* Tab项默认样式 */
.tab-item {
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  padding: 8px 0;
  cursor: pointer;
  /* 过渡动画，让颜色和下划线变化更平滑 */
  transition: all 0.3s ease;
  /* 让下划线宽度和文字一致，而不是占满容器 */
  display: inline-block;
  position: relative;
}

/* 选中状态的样式：变色+下划线 */
.tab-item.active {
  color: #1677ff; /* 选中时的文字颜色，可自定义 */
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1677ff; /* 下划线颜色和文字颜色一致 */
}

/* 可选：鼠标悬停效果 */
.tab-item:hover {
  color: #1677ff;
}

/* 内容面板样式（可选，让组件更完整） */
.tab-content {
  margin-top: 20px;
}

.content-item {
  display: none; /* 默认隐藏所有内容 */
}

.content-item.active {
  display: block; /* 显示选中的内容 */
  color: #333;
}

3. JavaScript交互（切换选中状态） #

用JS监听Tab项的点击事件，切换.active类来更新样式和内容：

// 获取所有Tab项和内容面板
const tabItems = document.querySelectorAll('.tab-item');
const contentItems = document.querySelectorAll('.content-item');

// 给每个Tab项绑定点击事件
tabItems.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 移除所有Tab项的active类
    tabItems.forEach(item => item.classList.remove('active'));
    // 给当前点击的Tab项添加active类
    tab.classList.add('active');
    
    // 同步切换内容面板（如果不需要内容面板可以删掉这部分）
    contentItems.forEach(item => item.classList.remove('active'));
    contentItems[index].classList.add('active');
  });
});

关键细节说明 #

• 用<button>而不是普通文本元素：保证了页面的可访问性，键盘用户可以通过Tab键导航，屏幕阅读器也能识别这是可交互元素。
• CSS过渡(transition)：让颜色和下划线的变化有平滑的动画，避免生硬切换。
• 下划线用伪元素::after实现：可以精准控制下划线的宽度、高度和位置，比text-decoration: underline更灵活。
• 响应式适配：如果需要在小屏幕上自动换行，给.tab-bar加上flex-wrap: wrap即可。

内容的提问来源于stack exchange，提问作者Lama