使選項卡在移動/網絡上具有響應性和可拖動性

Question

我在我的網站上使用下面顯示的選項卡。

是否可以讓它們完全響應，以便我可以瀏覽內容，或者會不會太復雜而無法寫出來？

沒有太多經驗。

我的標簽：

 const btn = [].slice.call(document.getElementsByTagName('button')) btn.forEach((item, index) => { item.addEventListener('click',function(){ btn.forEach((item) => {item.classList.remove('active')}) item.classList.add('active') document.getElementById('tab').setAttribute('data-tab', index) }) } )

 .wrapper { overflow: hidden; }.tabs { position: relative; -webkit-transition: all.9s ease-in-out; -moz-transition: all.9s ease-in-out; -ms-transition: all.9s ease-in-out; -o-transition: all.9s ease-in-out; transition: all.9s ease-in-out; }.tabs> * { width: 100%; }.tabs[data-tab='1'] { transform: translateX(-100%); }.tabs[data-tab='2'] { transform: translateX(-200%); }.tabs[data-tab='3'] { transform: translateX(-300%); }.tabs[data-tab='4'] { transform: translateX(-400%); }.inliner { white-space: nowrap; }.inliner > * { display: inline-block; *display: inline; }

 <div class="wrapper"> <button> Tab 1</button> <button> Tab 2</button> <button> Tab 3</button> <div id="tab" class="tabs inliner"> <div> <h2>Content 1</h2> </div> <div> <h2>Content 2</h2> </div> <div> <h2>Content 3</h2> </div> </div> </div>

同樣，我想讓選項卡內容也可以在移動設備上拖動。

很高興有任何幫助

Answer 1

是的，可以使您網站上的選項卡完全響應，以便它們可以在移動設備上滑動。 為此，您需要向現有的 JavaScript 和 CSS 添加一些額外的代碼。

首先，您需要在 JavaScript 代碼中添加對觸摸事件的支持。 這將允許您的代碼檢測用戶何時在屏幕上向左或向右滑動。 您可以通過添加以下代碼來執行此操作：

// detect touch events
if (document.ontouchstart !== null) {
  // register touch events
  document.addEventListener('touchstart', handleTouchStart, false);
  document.addEventListener('touchmove', handleTouchMove, false);
}

接下來，您需要向 JavaScript 代碼中添加一些新的事件處理函數。 這些函數將處理在上一步中注冊的 touchstart 和 touchmove 事件。 他們將負責根據滑動方向更新 tabs 元素的 data-tab 屬性。 您可以按如下方式添加這些功能：

// handle touch start event
function handleTouchStart(event) {
  // get the touch event object
  const touch = event.touches[0];
  // store the starting position of the touch
  touchStartX = touch.pageX;
}

// handle touch move event
function handleTouchMove(event) {
  // get the touch event object
  const touch = event.touches[0];
  // store the current position of the touch
  touchEndX = touch.pageX;

  // calculate the difference between the starting and current positions of the touch
  const diffX = touchStartX - touchEndX;

  // if the touch moved more than 50 pixels to the left,
  // set the data-tab attribute to the next tab
  if (diffX > 50) {
    const currentTab = document.getElementById('tab').getAttribute('data-tab');
    const nextTab = parseInt(currentTab) + 1;
    document.getElementById('tab').setAttribute('data-tab', nextTab);
  }

  // if the touch moved more than 50 pixels to the right,
  // set the data-tab attribute to the previous tab
  if (diffX < -50) {
    const currentTab = document.getElementById('tab').getAttribute('data-tab');
    const nextTab = parseInt(currentTab) - 1;
    document.getElementById('tab').setAttribute('data-tab', nextTab);
  }
}

最后，您需要更新 CSS 代碼以使選項卡完全響應。 這將涉及添加一些新規則以根據屏幕大小調整選項卡的寬度和 position。 您可以按如下方式執行此操作：

.tabs {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tabs > * {
  width: 100%;
  height: 100%;
  position: absolute;
}

.tabs[data-tab='1'] {
  left: 0%;
}

.tabs[data-tab='2'] {
  left: -100%;
}

.tabs[data-tab='3'] {
  left: -200%;
}