简单的tab两个相互切换

在Web开发中，简单的Tab切换通常是指通过点击不同的标签项来显示对应的面板内容，而隐藏其他所有面板内容的一种交互效果。实现这种效果通常需要使用HTML、CSS和JavaScript来完成。以下是一个简单的实现过程：

1. 使用HTML来创建Tab的结构，通常包括一组标签和对应的内容面板。

<div id="tabs">
  <ul class="tab-list">
    <li class="tab active" data-tab-target="#content1">Tab 1</li>
    <li class="tab" data-tab-target="#content2">Tab 2</li>
    <li class="tab" data-tab-target="#content3">Tab 3</li>
  </ul>
  <div id="content1" class="content active">Content 1</div>
  <div id="content2" class="content">Content 2</div>
  <div id="content3" class="content">Content 3</div>
</div>

2. 使用CSS来设置Tab的样式和面板的布局。

#tabs {
  /* 根据需要设置样式 */
}
.tab-list {
  /* 样式化标签列表 */
}
.tab {
  /* 样式化单个标签 */
  cursor: pointer;
}
.content {
  /* 样式化内容面板 */
  display: none;
}
.active {
  /* 应用到当前激活的Tab和内容面板 */
}

3. 使用JavaScript来添加切换逻辑，当点击不同的Tab时，显示对应的内容面板，并隐藏其他面板。

document.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.tab');
  var contents = document.querySelectorAll('.content');
  
  tabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      var target = document.querySelector(this.getAttribute('data-tab-target'));
      contents.forEach(function(content) {
        content.style.display = 'none';
      });
      target.style.display = 'block';
      tabs.forEach(function(tab) {
        tab.classList.remove('active');
      });
      this.classList.add('active');
    });
  });
});

这段JavaScript代码会在文档加载完成后运行，为每个Tab添加点击事件监听器。当点击某个Tab时，它会隐藏所有内容面板，只显示与被点击的Tab对应的面板，并更新Tab的激活状态。