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

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

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

  

    Tab 1
    Tab 2
    Tab 3
  
  
Tab 1 content
  
Tab 2 content
  
Tab 3 content

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';
      }
    });
  });
});

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