是的，你可以让你网站上的标签页完全响应，这样它们就可以在移动的设备上滑动。要做到这一点，你需要在现有的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代码，使标签页完全响应。这将涉及到添加一些新的规则，根据屏幕大小调整标签页的宽度和位置。你可以这样做：

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