如何使用 JavaScript 實作標籤內容的手指滑動切換效果同時限制在容器內？

如何使用 JavaScript 實作標籤內容的手指滑動切換效果同時限制在容器內？

標籤是一種常見的網頁佈局，可以在相同區域中切換顯示不同的內容。相較於傳統的點擊切換方式，手指滑動切換效果在行動裝置上更友善直覺。本文將介紹如何使用 JavaScript 實作標籤內容的手指滑動切換效果，並限制在容器內。

首先，我們需要一個 HTML 結構來承載選項卡內容。假設我們的選項卡有三個標籤，每個標籤對應一個內容區域，HTML 結構可以如下所示：

<div class="container">
  <div class="tabs">
    <div class="tab" id="tab1">标签1</div>
    <div class="tab" id="tab2">标签2</div>
    <div class="tab" id="tab3">标签3</div>
  </div>
  <div class="content">
    <div class="panel" id="panel1">内容1</div>
    <div class="panel" id="panel2">内容2</div>
    <div class="panel" id="panel3">内容3</div>
  </div>
</div>

上述程式碼中，.tabs 是用來承載標籤標籤，.content 是用來承載選項卡內容，.tab 和.panel 是具體的選項卡標籤和內容。

接下來，我們需要使用 CSS 來設定選項卡容器的樣式，包括容器大小、選項卡標籤的樣式和內容區域的樣式。為了實現手指滑動效果，我們還需要使用 overflow: hidden 來隱藏超出容器範圍的內容。 CSS 樣式可以如下所示：

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.tabs {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
}

.content {
  width: 300%;
  display: flex;
}

.panel {
  flex: 1;
  text-align: center;
}

接下來，我們可以使用 JavaScript 來實現手指滑動切換效果以及限制在容器內。我們使用 touchstart、touchmove 和 touchend 事件來監聽手指的滑動操作。

const container = document.querySelector('.container');
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');

let startX = 0;
let currentX = 0;

container.addEventListener('touchstart', (event) => {
  startX = event.touches[0].clientX;
});

container.addEventListener('touchmove', (event) => {
  event.preventDefault();
  currentX = event.touches[0].clientX;
});

container.addEventListener('touchend', () => {
  const deltaX = currentX - startX;
  const threshold = container.offsetWidth / 3;

  if (deltaX > threshold && currentIndex > 0) {
    currentIndex--;
  } else if (deltaX < -threshold && currentIndex < tabs.length - 1) {
    currentIndex++;
  }

  const translateX = -currentIndex * 100;

  tabs.forEach((tab) => tab.classList.remove('active'));
  panels.forEach((panel) => panel.classList.remove('active'));

  tabs[currentIndex].classList.add('active');
  panels[currentIndex].classList.add('active');

  container.querySelector('.content').style.transform = `translateX(${translateX}%)`;
});

在上述程式碼中，我們先透過querySelector 方法選擇DOM 元素，然後使用變數startX 和currentX 來記錄手指滑動時的起始和當前橫座標。在 touchstart 事件中，我們透過 event.touches[0].clientX 取得手指開始滑動時的橫座標。在touchmove 事件中，我們透過event.touches[0].clientX 取得手指目前的橫座標，並使用preventDefault() 方法取消預設滑動事件。在 touchend 事件中，我們計算了手指滑動的水平偏移 deltaX#，並根據 threshold 的閾值來判斷是否需要切換選項卡。最後，我們透過操作標籤樣式和內容區域的 transform 屬性來切換到正確的標籤和內容。

完整的範例程式碼可以參考以下連結：
[https://codepen.io/](https://codepen.io/)

綜上所述，我們可使用JavaScript 實作標籤內容的手指滑動切換效果，並限制在容器內。透過監聽 touchstart、touchmove 和 touchend 事件，我們可以實現手指滑動切換選項卡的功能，並透過 CSS 樣式來限制滑動在容器內。這樣的互動方式在行動裝置上更友善直覺，提升了使用者體驗。

以上是如何使用 JavaScript 實作標籤內容的手指滑動切換效果同時限制在容器內？的詳細內容。更多資訊請關注PHP中文網其他相關文章！