How to use JavaScript to achieve finger sliding switching effect of tab content?

How to use JavaScript to achieve the finger sliding switching effect of tab content?

On the mobile side, sliding your finger to switch tab content is a common interaction method. Through JavaScript, we can easily achieve this effect and provide users with a more friendly and smooth experience.

This article will introduce how to use JavaScript to achieve the finger sliding switching effect of tab content, and provide specific code examples for reference.

First, we need a basic HTML structure to create the tab. The following is a simple example:

<div class="tabs">
  <div class="tab active" data-tab="tab1">选项卡1</div>
  <div class="tab" data-tab="tab2">选项卡2</div>
  <div class="tab" data-tab="tab3">选项卡3</div>
</div>

<div id="tab1" class="tab-content active">选项卡1的内容</div>
<div id="tab2" class="tab-content">选项卡2的内容</div>
<div id="tab3" class="tab-content">选项卡3的内容</div>

In the above example, we have a tabs container, which contains tab labels of class tab, and the corresponding Content. The selected tab label will have the active class, and the content area will also have the active class.

Next, we need to use JavaScript to achieve the effect of finger sliding switching. First, we need to detect the user's gesture event and obtain the direction and distance of the finger slide.

const tabsContainer = document.querySelector('.tabs');
let startX = 0;
let dist = 0;

tabsContainer.addEventListener('touchstart', handleTouchStart, false);
tabsContainer.addEventListener('touchmove', handleTouchMove, false);

function handleTouchStart(event) {
  startX = event.touches[0].clientX;
}

function handleTouchMove(event) {
  dist = event.touches[0].clientX - startX;
}

In the above code, we use the touchstart event to get the touch point position when starting to slide, and use the touchmove event to calculate the distance of the finger slide in real time .

Next, we need to switch tabs based on the distance of the finger slide. We can decide whether to switch to the next or previous tab by calculating the percentage of the sliding distance.

tabsContainer.addEventListener('touchend', handleTouchEnd, false);

function handleTouchEnd(event) {
  const threshold = 50;

  if (Math.abs(dist) > threshold) {
    if (dist > 0) {
      // 向右滑动，切换到上一个选项卡
      switchToTab('prev');
    } else {
      // 向左滑动，切换到下一个选项卡
      switchToTab('next');
    }
  }
  
  startX = 0;
  dist = 0;
}

In the above code, we set a threshold threshold to determine whether the sliding distance is enough to switch to the next or previous tab. When the sliding distance is greater than the threshold, the switchToTab function is called according to the sliding direction to switch tabs.

Finally, we also need to implement the switchToTab function to truly realize the tab switching effect.

function switchToTab(direction) {
  const activeTab = document.querySelector('.tab.active');
  const activeContent = document.querySelector('.tab-content.active');

  const nextTab = direction === 'next' ? activeTab.nextElementSibling : activeTab.previousElementSibling;
  const nextContent = document.getElementById(nextTab.dataset.tab);

  activeTab.classList.remove('active');
  activeContent.classList.remove('active');

  nextTab.classList.add('active');
  nextContent.classList.add('active');
}

In the above code, the switchToTab function will decide to switch to the next or previous tab based on the direction parameter passed in. First, you want to get the currently active tab and content, then get the next tab and content based on the direction parameter passed in. Finally, toggle the visibility of tabs and content by adding or removing the active class.

Through the implementation of the above code, we can easily achieve the finger sliding switching effect of tab content.

Summary:
By using JavaScript, we can easily achieve the finger sliding switching effect of tab content. First, obtain the direction and distance of the finger slide by detecting gesture events. Then, determine whether to switch tabs based on the sliding distance. Finally, toggle the visibility of tabs and content by adding or removing the active class.

I hope this article will help you understand and realize the effect of switching tab content by sliding your finger. If you have any questions or need further assistance, please feel free to ask us.

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