用JS写一个tab切换

好的，很高兴为您解答。下面是一个简单的示例代码，使用 JavaScript 实现 tab 切换功能：

HTML 代码：

<div class="tabs">
  <button class="tab-link active" data-tab="tab1">Tab 1</button>
  <button class="tab-link" data-tab="tab2">Tab 2</button>
  <button class="tab-link" data-tab="tab3">Tab 3</button>

  <div id="tab1" class="tab-content active">
    <p>Content for Tab 1 goes here.</p>
  </div>
  <div id="tab2" class="tab-content">
    <p>Content for Tab 2 goes here.</p>
  </div>
  <div id="tab3" class="tab-content">
    <p>Content for Tab 3 goes here.</p>
  </div>
</div>

CSS 代码：

.tabs {
  display: flex;
}

.tab-link {
  border: none;
  background: none;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
}

.tab-link.active {
  border-bottom: 2px solid #000;
}

.tab-content {
  display: none;
}

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

JavaScript 代码：

let tabLinks = document.querySelectorAll('.tab-link');
let tabContents = document.querySelectorAll('.tab-content');

for (let i = 0; i < tabLinks.length; i++) {
  tabLinks[i].addEventListener('click', function(e) {
    e.preventDefault();
    
    document.querySelector('.tab-link.active').classList.remove('active');
    document.querySelector('.tab-content.active').classList.remove('active');

    this.classList.add('active');
    document.querySelector(this.getAttribute('data-tab')).classList.add('active');
  });
}

这段代码使用事件监听器为每个 tab 链接添加了点击事件。当用户点击 tab 链接时，它会禁用默认行为（即刷新页面），然后在当前活动的 tab 链接和 tab 内容中删除 `active` 类。接下来，它将向被点击的 tab 链接和相应的 tab 内容添加 `active` 类，以更改它们的外观和状态。

希望这可以帮助您实现您的 tab 切换需求。如果您有任何其他问题，请随时问我。