当前位置:主页 > JavsScript库 > 菜单 / 导航 >

Vanilla JavaScript 响应式选项卡和手风琴组件 - vanilla-tabs-js
栏目分类:菜单 / 导航   发布日期:2021-08-21   浏览次数:

响应式选项卡和手风琴 JavaScript 插件,可在台式机、平板电脑和移动设备上完美运行。

当它到达 CSS 断点(默认为 840px)时,选项卡会转换为手风琴。

如何使用它:

1. 将样式表 vanilla-tabs.min.css 和 JavaScript vanilla-tabs.min.js 添加到页面。

<link rel="stylesheet" href="dist/vanilla-tabs.min.css" />
<script src="dist/vanilla-tabs.min.js"></script>

2. 从 HTML 无序列表创建一个 tabs 组件。

<ul id="example" class="tabs">
  <li data-title="第一个标签">
    <h2>Heading 1</h2>
  </li>
  <li data-title="第二个标签">
    <h2>Heading 2</h2>
  </li>
  <li data-title="第三个标签">
    <h2>Heading 3</h2>
  </li>
</ul>

3. 创建一个水平选项卡组件。

new VanillaTabs({
    'selector': '#example',
    'type': 'horizontal', 
});

4. 创建一个垂直选项卡组件。

new VanillaTabs({
    'selector': '#example',
    'type': 'vertical', 
});

5. 创建一个手风琴。

new VanillaTabs({
    'selector': '#example',
    'type': 'accordion', 
});

6.覆盖px中的默认断点。

new VanillaTabs({
    'selector': '#example',
    'type': 'horizontal', 
    'responsiveBreak': 468,
});

7. 在 init 上设置初始选项卡。默认值:0。

new VanillaTabs({
    'selector': '#example',
    'type': 'horizontal', 
    'activeIndex': 1, // tab 2
});


官方网站:https://github.com/aboutwp/vanilla-tabs-js

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库