SlidethroughTabs

1. 首先，我们需要使用一个包含多个 Tab 的容器。
2. 在 CSS 中，我们为每个 Tab 设定宽度和高度，并使其 position 属性设置为 absolute。
3. 对于容器，我们需要使其 position 属性设置为 relative 并设定宽度和高度。
4. 然后，在下方添加一个滑动条。该滑动条需要设置为 absolute 并设置高度、宽度和背景颜色。
5. 当用户点击标签时，我们需要通过 JavaScript 来切换当前选中的 Tab，并将滑块位置设置为相应 Tab 的位置。
6. 最后，我们需要为滑块添加动画效果，使其滑动到下一个标签时能够流畅地移动。

以下是基本的 HTML/CSS/JS 代码：

HTML：

<div class="tab-container">
  <div class="tab" id="tab1" onclick="switchTabs(1)">Tab 1</div>
  <div class="tab" id="tab2" onclick="switchTabs(2)">Tab 2</div>
  <div class="tab" id="tab3" onclick="switchTabs(3)">Tab 3</div>
  <div class="slide-bar"></div>
</div>

CSS：

.tab {
  width: 100px;
  height: 50px;
  position: absolute;
}

.tab-container {
  position: relative;
  width: 300px;
  height: 50px;
}

.slide-bar {
  height: 5px;
  width: 100px;
  position: absolute;
  background-color: blue;
  transition: all 0.3s ease-in-out;
}

JS：

let currentTab = 1;

function switchTabs(tab) {
  if (tab !== currentTab) {
    document.getElementById("tab" + currentTab).classList.remove("active");
    document.getElementById("tab" + tab).classList.add("active");
    document.querySelector(".slide-bar").style.left = (tab - 1) * 100 + "px";
    currentTab = tab;