用webapi实现tab栏切换

1. HTML结构

<div class="tab-container">
  <div class="tab-nav">
    <a href="#" data-tab="tab1" class="active">Tab 1</a>
    <a href="#" data-tab="tab2">Tab 2</a>
    <a href="#" data-tab="tab3">Tab 3</a>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-panel active">Tab 1 Content</div>
    <div id="tab2" class="tab-panel">Tab 2 Content</div>
    <div id="tab3" class="tab-panel">Tab 3 Content</div>
  </div>
</div>

2. CSS样式

.tab-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.tab-nav {
  display: flex;
}

.tab-nav a {
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

.tab-nav a.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

.tab-content {
  padding: 10px;
}

.tab-panel {
  display: none;
}

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

3. JavaScript代码

const tabs = document.querySelectorAll('.tab-nav a');
const panels = document.querySelectorAll('.tab-panel');

tabs.forEach(tab => {
  tab.addEventListener('click', e => {
    e.preventDefault();
    const tabId = tab.getAttribute('data-tab');
    
    tabs.forEach(tab => tab.classList.remove('active'));
    panels.forEach(panel => panel.classList.remove('active'));
    
    tab.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  });
});

4. 解释

- 首先，我们使用`querySelectorAll`方法获取所有的tab标签和panel标签。
- 然后，我们遍历每个tab标签，并为其添加一个`click`事件监听器。
- 当某个tab被点击时，我们获取其`data-tab`属性值，以便找到对应的panel标签。
- 然后，我们将所有的tab标签和panel标签的`active`类都移除。
- 最后，我们给当前被点击的tab标签和对应的panel标签添加`active`类，以便显示它们。

这样，我们就完成了一个简单的tab栏切换功能。