在选项卡下添加样式线并突出显示所选选项卡

<div class="tab-container">
  <div class="tab">选项卡1</div>
  <div class="tab">选项卡2</div>
  <div class="tab">选项卡3</div>
</div>

.tab-container {
  display: flex;
}

.tab {
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab.active {
  border-bottom-color: #ff0000; /* 设置选中选项卡的样式线颜色 */
}

const tabs = document.querySelectorAll('.tab');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有选项卡的 active 类
    tabs.forEach(tab => tab.classList.remove('active'));
    
    // 为当前点击的选项卡添加 active 类
    tab.classList.add('active');
  });
});