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

以下是使用事件委托实现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 id="tab1" class="tabcontent">Tab 1 Content</div>
<div id="tab2" class="tabcontent">Tab 2 Content</div>
<div id="tab3" class="tabcontent">Tab 3 Content</div>

CSS代码：

.tabcontent {
  display: none;
}

JavaScript代码：

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

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

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