js怎么实现简洁的选项卡效果

实现简洁的选项卡效果可以使用以下步骤：

1. 首先，在HTML中创建选项卡的结构，例如：

<div class="tab-container">
  <div class="tab">
    <button class="tab-btn active" data-tab="tab1">Tab 1</button>
    <button class="tab-btn" data-tab="tab2">Tab 2</button>
    <button class="tab-btn" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content" id="tab1">Tab 1 content</div>
  <div class="tab-content" id="tab2" style="display: none;">Tab 2 content</div>
  <div class="tab-content" id="tab3" style="display: none;">Tab 3 content</div>
</div>

2. 然后，在CSS中定义选项卡的样式，例如：

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

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

.tab-content {
  display: none;
  padding: 10px;
}

3. 最后，在JavaScript中实现选项卡的切换效果，例如：

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

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const tabId = tab.getAttribute('data-tab');
    
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    
    tabContents.forEach(content => {
      if (content.id === tabId) {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});

通过以上步骤，就可以实现一个简洁的选项卡效果。点击不同的选项卡按钮时，对应的内容会显示出来，其他选项卡内容会隐藏起来。