如何使用 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中文網其他相關文章！
