vTabs.js是一个简单的jQuery选项卡插件，用于创建一个响应灵敏、移动友好的选项卡界面，允许用户在单击或悬停选项卡时在带有渐变过渡的选项卡内容之间切换。

非常适合于产品/服务描述、常见问题解答和产品组合，您可以在其中以整洁有序的方式展示信息。

如何使用它:

1.将选项卡导航和选项卡内容添加到网页中。

<div class="example">
  <div class="vtabs-toggles">
    <div class="vtab-toggle" data-target="#tab1">Tab 1</div>
    <div class="vtab-toggle" data-target="#tab2">Tab 2</div>
    <div class="vtab-toggle" data-target="#tab3">Tab 3</div>
  </div>
  <div class="vtabs-content">
    <div class="vtab-content" id="tab1">
      Tab 1 Content
    </div>
    <div class="vtab-content" id="tab2">
      Tab 2 Content
    </div>
    <div class="vtab-content" id="tab3">
      Tab 3 Content
    </div>
  </div>
</div>

2.将vtabs.js导入到您的文档中。

import "/path/to/vtabs/vtabs.min.js";

<!-- OR -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/vtabs/vtabs.js"></script>

3.调用函数v选项卡在顶部容器上。

$('.example').vTabs({
  // ...
})

4.将您自己的CSS样式应用于选项卡。

/* Example CSS */
.vtabs-toggles { 
  display: flex; 
}

.vtab-toggle { 
  padding: 1.25rem 2.5rem; 
  border-radius: 3px; 
  background-color: #4F46E5; 
  color: #fff; 
  cursor: pointer; 
  margin-right: 2rem;
}

.vtab-toggle.active {
  background-color: #ccc; 
  color: #000;  
}

5.将鼠标悬停在选项卡上，在选项卡内容之间切换。

$('.example').vTabs({
  'hover': true,
})

6.确定是否仅在移动设备上激活选项卡插件。默认值：false。

$('.example').vTabs({
  'mobileOnly': true,
  'mobileViewportWidth': 639,
})

7.确定是否启用可变高度。默认值：true。

$('.example').vTabs({
  'variableHeight': false,
})

更新日志：

2023-03-20

• 修复选项卡内容中子元素的高度发生突变并导致选项卡包装器高度不匹配的问题。

预览截图

渐变转换 简单选项卡jQuery插件 vTabs.js