How to use JavaScript to achieve the finger sliding switching effect of tab content while limiting it to the container?

How to use JavaScript to achieve the finger sliding switching effect of tab content while limiting it to the container?

Tabs are a common web page layout that can switch to display different content in the same area. Compared with the traditional click switching method, the finger sliding switching effect is more friendly and intuitive on mobile devices. This article will introduce how to use JavaScript to implement the finger sliding switching effect of tab content and limit it to the container.

First, we need an HTML structure to host the tab content. Assume that our tab has three labels, each label corresponds to a content area, the HTML structure can be as follows:

<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>

In the above code, .tabs is used to carry the tab label , .content is used to carry the tab content, .tab and .panel are the specific tab labels and content.

Next, we need to use CSS to style the tab container, including container size, tab label style, and content area style. In order to achieve the finger sliding effect, we also need to use overflow: hidden to hide content beyond the scope of the container. The CSS style can look like this:

.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;
}

Next, we can use JavaScript to implement the finger slide switching effect and limit it to the container. We use touchstart, touchmove and touchend events to listen for finger sliding operations.

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}%)`;
});

In the above code, we first select the DOM element through the querySelector method, and then use the variables startX and currentX to record when the finger slides The starting and current abscissa. In the touchstart event, we use event.touches[0].clientX to get the abscissa when the finger starts sliding. In the touchmove event, we obtain the current abscissa of the finger through event.touches[0].clientX and use the preventDefault() method to cancel the default sliding event . In the touchend event, we calculate the horizontal offset of the finger slide deltaX, and determine whether the tab needs to be switched based on the threshold of threshold. Finally, we switch to the correct tab and content by manipulating the transform properties of the tab style and content area.

For complete sample code, please refer to the following link:
[https://codepen.io/](https://codepen.io/)

In summary, we You can use JavaScript to implement the finger sliding switching effect of tab content and limit it to the container. By listening to touchstart, touchmove and touchend events, we can implement the function of switching tabs by finger sliding, and restrict sliding within the container through CSS styles. This type of interaction is more friendly and intuitive on mobile devices, improving user experience.

The above is the detailed content of How to use JavaScript to achieve the finger sliding switching effect of tab content while limiting it to the container?. For more information, please follow other related articles on the PHP Chinese website!