jQuery实现tab标签滑动切换效果

以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码：

HTML结构：

<div class="tab-wrap">
  <ul class="tab-nav">
    <li class="active">Tab1</li>
    <li>Tab2</li>
    <li>Tab3</li>
    <li>Tab4</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">Tab1 Content</div>
    <div class="tab-pane">Tab2 Content</div>
    <div class="tab-pane">Tab3 Content</div>
    <div class="tab-pane">Tab4 Content</div>
  </div>
</div>

CSS样式：

.tab-wrap {
  position: relative;
}
.tab-nav {
  display: flex;
  justify-content: space-between;
}
.tab-nav li {
  cursor: pointer;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-bottom: none;
}
.tab-nav li.active,
.tab-nav li:hover {
  background-color: #ccc;
}
.tab-content {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.tab-pane {
  display: none;
  padding: 20px;
}
.tab-pane.active {
  display: block;
}

JavaScript代码：

$(function() {
  // 获取tab标签和内容元素
  var $tabNav = $(".tab-nav li");
  var $tabContent = $(".tab-pane");

  // 绑定tab标签点击事件
  $tabNav.click(function() {
    // 获取点击的tab标签索引
    var index = $(this).index();

    // 切换tab标签的active类
    $tabNav.removeClass("active");
    $(this).addClass("active");

    // 滑动切换tab内容
    $tabContent.stop().animate({
      "top": -index * $tabContent.height()
    }, 500);
  });
});

这段代码实现了以下功能：

- 点击tab标签切换标签的active状态
- 滑动切换tab内容

注意：这只是一个简单的示例，具体实现方式可以根据需求进行调整。