什么是@morsedigital/vanilla-tabbed-content
@morsedigital/vanilla-tabbed-content 是一个可以让用户在多个页面之间切换的JavaScript库。它使用纯 JavaScript 编写，因此它没有任何依赖性，可以直接在现代浏览器中使用。
安装及使用
安装
你可以使用 npm 或者 yarn 安装该库。在项目文件夹中运行以下命令即可：
npm install @morsedigital/vanilla-tabbed-content
yarn add @morsedigital/vanilla-tabbed-content
使用
要使用该库，只需在 HTML 页面中添加以下代码：
-- -------------------- ---- -------
---- -----------------------
--- -------------
------ ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
---- ----------
------- -- --- ------- -- --- ------
------
---- ----------
------- -- --- ------- -- --- ------
------
---- ----------
------- -- --- ------- -- --- ------
------
------然后在 JavaScript 文件中添加以下代码：
import VanillaTabbedContent from '@morsedigital/vanilla-tabbed-content';
const tabbedContent = new VanillaTabbedContent('.tabbed-content');
tabbedContent.init();现在，当用户点击选项卡时，选项卡内容会自动切换。
组件选项
VanillaTabbedContent 构造器接受一个选项对象，可以用来自定义选项卡组件的行为。以下是可用的选项：
activeClass（默认值：is-active）：选项卡激活时的 CSS 类名。navSelector（默认值：ul.tabs）：选项卡导航的选择器。navItemSelector（默认值：li）：选项卡导航项的选择器。panelSelector（默认值：.tab-panel）：选项卡内容面板的选择器。panelActiveClass（默认值：is-active）：选项卡内容面板激活时的 CSS 类名。transitionDuration（默认值：300）：选项卡切换的过渡时间。
示例代码
以下是一个完整示例，可以直接在浏览器中运行：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---------------
-------
----- -
------- --
-------- --
----------- -----
-------- -----
-
----- -- -
------------- -----
-
----- -- - -
-------- ------
-------- -----
------- --- ----- -----
----------- --------
------ -----
---------------- -----
-
----- -- ----------- -
-------------- -----
----------- -----
-
---------- -
-------- -----
------- --- ----- -----
-------- -----
----------- -----
----------- -----
-
-------------------- -
-------- ------
-
--------
-------
------
---- -----------------------
--- -------------
------ ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
---- ----------------- ----------
------- -- --- ------- -- --- ------
------
---- ----------------- ----------
------- -- --- ------- -- --- ------
------
---- ----------------- ----------
------- -- --- ------- -- --- ------
------
------
------- ----------------------------------------------------------------------
--------
----- ------------- - --- ----------------------------------------
---------------------
---------
-------
-------结论
现在您已经掌握了如何使用 @morsedigital/vanilla-tabbed-content，您可以使用这个小型库来创建复杂的选项卡组件。这个库易于使用、具有高自定义性，非常适合初学者。如果您有任何疑问或建议，请在评论区发表您的观点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244767