原生tab栏切换三级

实现原生 tab 栏切换三级的方法有很多种，以下是一种简单的实现方式：

1. HTML 结构

<div class="tab-container">
  <div class="tabs">
    <ul>
      <li class="active"><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <ul class="sub-tabs">
        <li class="active"><a href="#tab1-1">Sub Tab 1</a></li>
        <li><a href="#tab1-2">Sub Tab 2</a></li>
        <li><a href="#tab1-3">Sub Tab 3</a></li>
      </ul>
      <div class="sub-tab-content">
        <div id="tab1-1" class="sub-tab-pane active">Tab 1, Sub Tab 1 Content</div>
        <div id="tab1-2" class="sub-tab-pane">Tab 1, Sub Tab 2 Content</div>
        <div id="tab1-3" class="sub-tab-pane">Tab 1, Sub Tab 3 Content</div>
      </div>
    </div>
    <div id="tab2" class="tab-pane">
      <ul class="sub-tabs">
        <li class="active"><a href="#tab2-1">Sub Tab 1</a></li>
        <li><a href="#tab2-2">Sub Tab 2</a></li>
        <li><a href="#tab2-3">Sub Tab 3</a></li>
      </ul>
      <div class="sub-tab-content">
        <div id="tab2-1" class="sub-tab-pane active">Tab 2, Sub Tab 1 Content</div>
        <div id="tab2-2" class="sub-tab-pane">Tab 2, Sub Tab 2 Content</div>
        <div id="tab2-3" class="sub-tab-pane">Tab 2, Sub Tab 3 Content</div>
      </div>
    </div>
    <div id="tab3" class="tab-pane">
      <ul class="sub-tabs">
        <li class="active"><a href="#tab3-1">Sub Tab 1</a></li>
        <li><a href="#tab3-2">Sub Tab 2</a></li>
        <li><a href="#tab3-3">Sub Tab 3</a></li>
      </ul>
      <div class="sub-tab-content">
        <div id="tab3-1" class="sub-tab-pane active">Tab 3, Sub Tab 1 Content</div>
        <div id="tab3-2" class="sub-tab-pane">Tab 3, Sub Tab 2 Content</div>
        <div id="tab3-3" class="sub-tab-pane">Tab 3, Sub Tab 3 Content</div>
      </div>
    </div>
  </div>
</div>

2. CSS 样式

/* tab 样式 */
.tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.tabs a {
  display: block;
  padding: 10px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  border-radius: 5px 5px 0 0;
}

.tabs a:hover {
  background-color: #ddd;
}

.tabs .active a {
  background-color: #ddd;
}

/* sub-tab 样式 */
.sub-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
}

.sub-tabs li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.sub-tabs a {
  display: block;
  padding: 10px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  border-radius: 5px 5px 0 0;
}

.sub-tabs a:hover {
  background-color: #ddd;
}

.sub-tabs .active a {
  background-color: #ddd;
}

/* tab 内容样式 */
.tab-content .tab-pane {
  display: none;
}

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

.sub-tab-content .sub-tab-pane {
  display: none;
}

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

3. JavaScript 代码

// 获取所有 tab 标签和内容
const tabs = document.querySelectorAll('.tabs li');
const tabContent = document.querySelectorAll('.tab-content .tab-pane');

// 获取所有 sub-tab 标签和内容
const subTabs = document.querySelectorAll('.sub-tabs li');
const subTabContent = document.querySelectorAll('.sub-tab-content .sub-tab-pane');

// 给每个 tab 标签绑定点击事件
tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 切换 active 样式
    tabs.forEach((tab) => {
      tab.classList.remove('active');
    });
    tab.classList.add('active');

    // 切换 tab 内容
    tabContent.forEach((content) => {
      content.classList.remove('active');
    });
    tabContent[index].classList.add('active');

    // 切换 sub-tab 样式和内容
    subTabs.forEach((subTab, subIndex) => {
      subTab.classList.remove('active');
      subTabContent[subIndex].classList.remove('active');
    });
    subTabs[0].classList.add('active');
    subTabContent[index * 3].classList.add('active');
  });
});

// 给每个 sub-tab 标签绑定点击事件
subTabs.forEach((subTab, index) => {
  subTab.addEventListener('click', () => {
    // 切换 active 样式
    subTabs.forEach((subTab) => {
      subTab.classList.remove('active');
    });
    subTab.classList.add('active');

    // 切换 sub-tab 内容
    subTabContent.forEach((content) => {
      content.classList.remove('active');
    });
    subTabContent[index].classList.add('active');
  });
});

以上代码实现了一个三级 tab 栏切换的效果。其中，每个 tab 标签下有三个 sub-tab 标签，每个 sub-tab 标签对应一个内容区域。点击 tab 标签时，切换 tab 内容和 sub-tab 样式和内容；点击 sub-tab 标签时，切换 sub-tab 内容。