如何在选项卡式活动中按回上一选项卡

// HTML结构
<div class="tabs">
  <div class="tab" data-tab="tab1">选项卡1</div>
  <div class="tab" data-tab="tab2">选项卡2</div>
  <div class="tab" data-tab="tab3">选项卡3</div>
</div>

<div class="tab-content">
  <div id="tab1" class="content">选项卡1的内容</div>
  <div id="tab2" class="content">选项卡2的内容</div>
  <div id="tab3" class="content">选项卡3的内容</div>
</div>

// JavaScript代码
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const currentTab = tab.dataset.tab;
    const currentIndex = Array.from(tabs).indexOf(tab);
    const previousIndex = (currentIndex - 1 + tabs.length) % tabs.length;
    const previousTab = tabs[previousIndex].dataset.tab;

    // 切换选项卡内容的显示与隐藏
    contents.forEach(content => {
      content.style.display = content.id === currentTab ? 'block' : 'none';
    });

    // 更新选项卡的状态
    tabs.forEach(tab => {
      tab.classList.remove('active');
    });
    tab.classList.add('active');
  });
});