更改列表项底部选项卡的当前活动状态单击片段

<ul class="list">
  <li class="item active">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<div class="tabs">
  <a class="tab active" href="#">Tab 1</a>
  <a class="tab" href="#">Tab 2</a>
  <a class="tab" href="#">Tab 3</a>
</div>

.item {
  /* 列表项样式 */
}

.active {
  /* 活动状态样式 */
}

.tab {
  /* 选项卡样式 */
}

.tabs .active {
  /* 活动状态样式 */
}

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

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 移除所有列表项和选项卡的活动状态类
    items.forEach(item => item.classList.remove('active'));
    tabs.forEach(tab => tab.classList.remove('active'));

    // 添加当前选项卡和列表项的活动状态类
    tab.classList.add('active');
    items[index].classList.add('active');
  });
});