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:

 
 
标签1
 
标签2
 
标签3
 
 
 
内容1
 
内容2
 
内容3
 
 

In the above code,.tabsis used to carry the tab label ,.contentis used to carry the tab content,.taband.panelare 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 useoverflow: hiddento 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 usetouchstart,touchmoveandtouchendevents 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 thequerySelectormethod, and then use the variablesstartXandcurrentXto record when the finger slides The starting and current abscissa. In thetouchstartevent, we useevent.touches[0].clientXto get the abscissa when the finger starts sliding. In thetouchmoveevent, we obtain the current abscissa of the finger throughevent.touches[0].clientXand use thepreventDefault()method to cancel the default sliding event . In thetouchendevent, we calculate the horizontal offset of the finger slidedeltaX, and determine whether the tab needs to be switched based on the threshold ofthreshold. Finally, we switch to the correct tab and content by manipulating thetransformproperties 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 totouchstart,touchmoveandtouchendevents, 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!