底部有小圆点的切换js

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-button active" data-tab="1">Tab 1</button>
    <button class="tab-button" data-tab="2">Tab 2</button>
    <button class="tab-button" data-tab="3">Tab 3</button>
  </div>
  <div class="tab-indicators">
    <span class="indicator active"></span>
    <span class="indicator"></span>
    <span class="indicator"></span>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">Content for Tab 1</div>
    <div class="tab-pane" id="tab2">Content for Tab 2</div>
    <div class="tab-pane" id="tab3">Content for Tab 3</div>
  </div>
</div>

.tab-container {
  position: relative;
}

.tab-buttons {
  display: flex;
}

.tab-button {
  padding: 10px;
  cursor: pointer;
}

.tab-indicators {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.indicator {
  height: 5px;
  width: 30%;
  background-color: grey;
  transition: background-color 0.3s;
}

.indicator.active {
  background-color: blue;
}

.tab-content {
  padding: 20px;
}

.tab-pane {
  display: none;
}

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

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    const tabId = button.getAttribute('data-tab');
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.indicator').forEach(ind => ind.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));

    button.classList.add('active');
    document.querySelector(`.indicator:nth-child(${tabId})`).classList.add('active');
    document.getElementById(`tab${tabId}`).classList.add('active');
  });
});