原生js 实现循环显示tab页面

可以使用原生 JavaScript 来实现循环显示 tab 页面，具体实现步骤如下：

1. 获取所有的 tab 按钮和对应的内容区域
2. 给每个 tab 按钮绑定点击事件，点击时切换对应的内容区域的显示
3. 默认显示第一个 tab 按钮对应的内容区域

下面是一个简单的示例代码：

HTML:

<div class="tabs">
  <button class="tab-btn" data-tab="tab1">Tab 1</button>
  <button class="tab-btn" data-tab="tab2">Tab 2</button>
  <button class="tab-btn" data-tab="tab3">Tab 3</button>
  
  <div class="tab-content" id="tab1">Tab 1 content</div>
  <div class="tab-content" id="tab2">Tab 2 content</div>
  <div class="tab-content" id="tab3">Tab 3 content</div>
</div>

JavaScript:

// 获取所有的 tab 按钮和对应的内容区域
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

// 给每个 tab 按钮绑定点击事件
tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 切换对应的内容区域的显示
    const tabId = btn.getAttribute('data-tab');
    tabContents.forEach(content => {
      if (content.id === tabId) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    });
  });
});

// 默认显示第一个 tab 按钮对应的内容区域
tabBtns[0].click();

CSS:

.tab-content {
  display: none;
}

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

这样就可以实现一个简单的循环显示 tab 页面的效果了。