在前端开发中，选用适当的工具库和插件能够大大提高开发效率、减少出错率。@john-dorian/tabs 是一个基于 jQuery 的选项卡插件，可以让界面更加友好，使用体验更加流畅。
安装和引入
@john-dorian/tabs 已发布到 npm 上，可以通过 npm 安装使用。
npm install @john-dorian/tabs
安装后，可以在需要的项目文件中引入该插件。
import "@john-dorian/tabs";
基本用法
- 在 HTML 中添加需要展示的选项卡内容。
-- -------------------- ---- -------
---- -------------
----
------ ---------------------------
------ ---------------------------
------ ---------------------------
-----
---- -----------
----------------
------
---- -----------
----------------
------
---- -----------
----------------
------
------- 在 JavaScript 中初始化选项卡。
$("#my-tabs").tabs();选项卡配置
@john-dorian/tabs 具有多项可配置的选项，可以让你根据需要进行自定义设置。
-- -------------------- ---- -------
--------------------
------------ -- -- --------
------ -------- -- --------------
--------- ---- -- ---------------
------- -------- -- ---------
--------------- --------------- --- - -- -----------
------------------------------
--
--------- --------------- --- - -- -----------
------------------------
-
---示例代码
完整的选项卡示例代码如下所示。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
------- -----------------------------------------------------------
------- ---------------------------------------------
--------
------------ -
--------------------
------------ --
------ --------
--------- ----
------- --------
--------------- --------------- --- -
------------------------------
--
--------- --------------- --- -
------------------------
-
---
---
---------
-------
-------- -
----------- -----
-
-------- -- -
--------- ---------
-------- ---
-------- -----
---------------- -------------
----------- -----
------- --
-------- --
-
-------- -- -
-------- ---- -----
-
-------- -- - -
---------------- -----
------ -----
-
-------- -- ------- -
------ -----
-
-------- -------------- -
--------- ---------
-------- --
-------- -----
-------- -----
------- --- ----- -----
----------- -----
-
-------- -------------------------- -
-------- ------
-
--------
-------
------
---- -------------
----
------ ---------------------------
------ ---------------------------
------ ---------------------------
-----
---- -----------
----------------
------
---- -----------
----------------
------
---- -----------
----------------
------
------
-------
-------总结
@john-dorian/tabs 是一个实用的选项卡插件，可以让界面更加友好、易用，提高用户体验。通过本文的介绍，你已经了解了该插件的基本用法和高级选项，可以根据需要进行自定义设置。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc3967216659e24429f