用SE6写一个选项卡点击切换

以下是一个简单的选项卡点击切换的示例，使用了ES6的箭头函数和模板字面量：

<div class="tabs">
  <div class="tab" data-tab="1">Tab 1</div>
  <div class="tab" data-tab="2">Tab 2</div>
  <div class="tab" data-tab="3">Tab 3</div>
</div>

<div class="tab-content">
  <div class="tab-pane" data-tab="1">Content for Tab 1</div>
  <div class="tab-pane" data-tab="2">Content for Tab 2</div>
  <div class="tab-pane" data-tab="3">Content for Tab 3</div>
</div>

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-pane');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const tabNumber = tab.dataset.tab;

    // Remove active class from all tabs and tab contents
    tabs.forEach(tab => tab.classList.remove('active'));
    tabContents.forEach(tabContent => tabContent.classList.remove('active'));

    // Add active class to clicked tab and corresponding tab content
    tab.classList.add('active');
    document.querySelector(`.tab-pane[data-tab="${tabNumber}"]`).classList.add('active');
  });
});

在这个示例中，我们首先获取所有的选项卡和选项卡内容元素。然后，我们为每个选项卡添加一个点击事件监听器，当点击选项卡时，我们获取它的数据属性 `data-tab`，指示哪个选项卡被点击了。然后我们删除所有选项卡和选项卡内容元素的活动类，将其重置为非活动状态，然后将活动类添加到被点击的选项卡和相应的选项卡内容元素中。通过使用模板字面量和相应的数据属性，我们可以轻松地查找选项卡内容元素。