h5实现移动端横向滚动tab，并响应内容

H5在移动端实现横向滚动的Tab栏通常通过CSS的`display: flex` 和 `overflow-x: auto` 来创建一个滑动容器，配合JavaScript监听触摸事件可以实现触控滑动效果。以下是简单的步骤：

1. **HTML结构**:

<div class="scroll-tabs">
  <div class="tab-item">Tab 1</div>
  <div class="tab-item">Tab 2</div>
  <!-- 添加更多选项 -->
</div>

<div class="content-container">
  <!-- 每个Tab的内容 -->
  <div id="tab1-content" style="display: none;">Content for Tab 1</div>
  <div id="tab2-content" style="display: none;">Content for Tab 2</div>
</div>

2. **CSS样式**:

.scroll-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 针对iOS优化 */
}

.tab-item {
  flex: 0 0 auto; /* 保持每个Tab等宽 */
}

3. **JavaScript交互** (使用jQuery简化示例):

$(document).ready(function() {
  // 初始状态隐藏所有内容
  $(".content-container").children().hide();

  // 给每个Tab添加点击事件
  $('.scroll-tabs .tab-item').on('click', function(e) {
    e.preventDefault(); // 阻止默认链接跳转
    var tabNum = $(this).index();
    // 显示对应Tab的内容并隐藏其他
    $('#tab' + (tabNum+1) + '-content').show().siblings('.content-container > div').hide();
  });
});

当用户点击Tab时，相应的内容会被显示，而其余内容则会隐藏。