制作网页Tab标签切换方法

<ul class="tab-buttons">
  <li class="active">标签1</li>
  <li>标签2</li>
  <li>标签3</li>
</ul>

<div class="tab-content">
  <div class="tab-panel active">内容1</div>
  <div class="tab-panel">内容2</div>
  <div class="tab-panel">内容3</div>
</div>

.tab-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-buttons li {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eee;
  cursor: pointer;
}

.tab-buttons li.active {
  background-color: #ccc;
}

.tab-content {
  margin-top: 20px;
}

.tab-panel {
  display: none;
}

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

// 获取标签按钮和内容区域的元素
var buttons = document.querySelectorAll('.tab-buttons li');
var panels = document.querySelectorAll('.tab-panel');

// 绑定标签按钮的点击事件
buttons.forEach(function(button, index) {
  button.addEventListener('click', function() {
    // 移除所有按钮的激活状态
    buttons.forEach(function(btn) {
      btn.classList.remove('active');
    });

    // 隐藏所有内容区域
    panels.forEach(function(panel) {
      panel.classList.remove('active');
    });

    // 给当前按钮和内容区域添加激活状态
    this.classList.add('active');
    panels[index].classList.add('active');
  });
});