6.实现一个简单Tab栏切换并添加动画效果

以下是一个简单的Tab栏切换并添加动画效果的实现：

HTML代码：

<div class="tab-container">
  <div class="tab-header">
    <div class="tab-header-item active" data-tab="tab1">Tab 1</div>
    <div class="tab-header-item" data-tab="tab2">Tab 2</div>
    <div class="tab-header-item" data-tab="tab3">Tab 3</div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">Tab 1 Content</div>
    <div class="tab-pane" id="tab2">Tab 2 Content</div>
    <div class="tab-pane" id="tab3">Tab 3 Content</div>
  </div>
</div>

CSS代码：

.tab-container {
  border: 1px solid #ccc;
  overflow: hidden;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  background-color: #eee;
}

.tab-header-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab-header-item.active {
  background-color: #fff;
}

.tab-content {
  padding: 10px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fade-in 0.3s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScript代码：

const tabHeaderItems = document.querySelectorAll('.tab-header-item');
const tabPanes = document.querySelectorAll('.tab-pane');

tabHeaderItems.forEach(tabHeaderItem => {
  tabHeaderItem.addEventListener('click', () => {
    // 切换Tab栏样式
    tabHeaderItems.forEach(item => {
      item.classList.remove('active');
    });
    tabHeaderItem.classList.add('active');
    
    // 切换Tab内容
    const tab = tabHeaderItem.dataset.tab;
    tabPanes.forEach(tabPane => {
      if (tabPane.id === tab) {
        tabPane.classList.add('active');
      } else {
        tabPane.classList.remove('active');
      }
    });
  });
});

在这个实现中，我们首先定义了一个包含Tab栏和Tab内容的容器，并为它们添加了对应的类名。然后我们使用flex布局定义了Tab栏的样式，并使用JavaScript实现了Tab栏的点击事件，当点击某个Tab栏时，会切换对应的Tab内容，并为当前的Tab栏添加active类名来改变样式。

为了添加动画效果，我们在CSS中定义了一个fade-in的动画，当Tab内容切换时，如果是当前的Tab内容，则为它添加active类名，并应用fade-in动画，实现了渐变显示效果。