带有css的选项卡菜单，用于电子邮件时事通讯

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

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

.tab-menu {
  display: flex;
}

.tab-button {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}

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

.tab-content {
  display: none;
}

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

const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    const tab = button.getAttribute('data-tab');
    
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('show'));
    
    button.classList.add('active');
    document.getElementById(tab).classList.add('show');
  });
});