js实现tab选项卡切换

好的，下面是一个简单的实现：

HTML代码：

<div class="tab">
  <button class="tab-btn active" data-tab="tab1">选项卡1</button>
  <button class="tab-btn" data-tab="tab2">选项卡2</button>
  <button class="tab-btn" data-tab="tab3">选项卡3</button>
</div>

<div class="tab-content active" data-tab="tab1">
  选项卡1的内容
</div>
<div class="tab-content" data-tab="tab2">
  选项卡2的内容
</div>
<div class="tab-content" data-tab="tab3">
  选项卡3的内容
</div>

CSS代码：

.tab-btn {
  background-color: #eee;
  border: none;
  outline: none;
  padding: 8px 16px;
  cursor: pointer;
}

.tab-btn.active {
  background-color: #ccc;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

JavaScript代码：

const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const tab = btn.dataset.tab;
    activateTab(tab);
  });
});

function activateTab(tab) {
  tabContents.forEach(content => {
    if (content.dataset.tab === tab) {
      content.classList.add('active');
    } else {
      content.classList.remove('active');
    }
  });
  
  tabBtns.forEach(btn => {
    if (btn.dataset.tab === tab) {
      btn.classList.add('active');
    } else {
      btn.classList.remove('active');
    }
  });
}

运行效果：点击不同的选项卡按钮，可以切换显示对应的内容。