在前端开发中，我们常常需要通过标签页来展示不同种类的内容，这时候可以使用npm包 @ianhatton/vanilla-tabbed-content来实现。本文将详细介绍如何使用这个npm包来实现标签页的展示效果。
安装npm包
首先，我们需要使用npm安装 @ianhatton/vanilla-tabbed-content npm包。可以使用以下命令进行安装：
npm install --save @ianhatton/vanilla-tabbed-content
使用示例
创建一个HTML模板文件，引入 @ianhatton/vanilla-tabbed-content和样式文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
------
---- -----------------
--- -------------------- ---------------
--- ---------------------- ---------- ------------------ --------
--- ---------- ------------------- --------
--- ---------- ------------------ --------
-----
---- -----------------------
---- -------------------- --------------------- -------------------- -- --- ------- --- --- ----- ----------
---- --------------------- -------------------- -- --- ------- --- --- ------ ----------
---- --------------------- -------------------- -- --- ------- --- --- ----- ----------
------
------
------- --------------------------------------------------------------------------------------------------
--------
--- ---------- - --- ----------------------
-------- ----------------------------------------
---------- -----------------------------------------
---
---------
-------
-------可以看到，这段代码包含了一个标签页控件，具体实现通过以下几个步骤：
- 创建一个父元素，它有两个子元素 vjs-tab-list 和 vjs-tab-panels。
- 在vjs-tab-list中提供一个 ul 元素，并赋予 list 对象。
- 在每个 tab 标签中设置一个 role="tab" 和 tabindex="0" 属性，并提供一些文本。
- 在 vjs-tab-panels中将每个 panel 包装在 div 元素中，并为每个 div 元素提供一个 role="tabpanel" 属性。
- 通过 JavaScript 初始化 vanillaTabbedContent 实例。
最后，我们需要引入 vanilla-tabbed-content.min.js 文件并创建 vanillaTabbedContent 的实例。
参数与选项
实例化的时候，可以传入一些参数和选项来自定义标签页控件的一些属性，例如：
var tabContent = new vanillaTabbedContent({
tabList: tabList,
tabPanels: tabPanels,
activeTabClass: 'active-tab',
activePanelClass: 'display-panel',
css: 'tabbed-content.css'
});| 参数 | 描述 | 默认值 |
|---|---|---|
| tabList | 控制标签页列表的ul标签 | .vjs-tab-list |
| tabPanels | 控制标签内容的div标签 | .vjs-tab-panels |
| activeTabClass | 活跃的标签页的CSS类 | vjs-tab-active |
| activePanelClass | 活跃的标签内容的CSS类 | vjs-tab-panel-active |
| css | 引入自定义CSS的路径，不设置则不会引入CSS | undefined |
总结
在本文中，我们详细介绍了如何使用 @ianhatton/vanilla-tabbed-content npm包来实现标签页的展示效果。通过上述示例和参数说明，相信大家已经掌握了如何使用这个npm包。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e2441f0