JavaScript运用事件委托实现tab栏切换

以下是JavaScript运用事件委托实现tab栏切换的示例代码：

HTML代码：

<div class="tab">
  <button class="tablinks" data-tab="tab1">Tab 1</button>
  <button class="tablinks" data-tab="tab2">Tab 2</button>
  <button class="tablinks" data-tab="tab3">Tab 3</button>
</div>

<div class="tabcontent" id="tab1">Tab 1 content</div>
<div class="tabcontent" id="tab2">Tab 2 content</div>
<div class="tabcontent" id="tab3">Tab 3 content</div>

JavaScript代码：

// 获取所有tab按钮
const tabBtns = document.querySelectorAll('.tablinks');

// 获取所有tab内容
const tabContents = document.querySelectorAll('.tabcontent');

// 为tab按钮添加点击事件
document.querySelector('.tab').addEventListener('click', function(event) {
  // 如果点击的是tab按钮
  if (event.target.classList.contains('tablinks')) {
    // 遍历所有tab按钮
    for (let i = 0; i < tabBtns.length; i++) {
      // 移除所有tab按钮的active类名
      tabBtns[i].classList.remove('active');
      // 隐藏所有tab内容
      tabContents[i].style.display = 'none';
    }
    // 给当前点击的tab按钮添加active类名
    event.target.classList.add('active');
    // 显示当前点击的tab内容
    document.getElementById(event.target.dataset.tab).style.display = 'block';
  }
});