简介
这是一个基于WordPress的标签插件，可以在页面中嵌入多个标签，实现Tab选项卡的效果。该插件通过npm发布，可以直接使用。
安装
在终端中执行以下命令：
npm install wordpress-tab-plugin-html-test --save
使用
引入插件
在你的HTML文件中，使用以下代码引入插件：
<script src="./node_modules/wordpress-tab-plugin-html-test/dist/index.min.js"></script> <link rel="stylesheet" href="./node_modules/wordpress-tab-plugin-html-test/dist/index.min.css">
添加标签
给任意一个div添加class为“tab-container”，就可以实现Tab选项卡的效果。
-- -------------------- ---- -------
---- ----------------------
--- -------------
------ -------------------------
------ -------------------------
------ -------------------------
-----
---- --------------------
---- ----------
---------------
---------------
---- -------------------
------
---- ----------
---------------
---------------
---- -------------------
------
---- ----------
---------------
---------------
---- -------------------
------
------
------在li元素中的a标签href属性中填写对应div的id即可。
自定义样式
可以通过以下CSS来自定义标签的样式：
-- -------------------- ---- ------- ----- - ----------- ----- ------- -- -------- -- - ----- -- - -------- ------------- ------------- ---- - ----- -- - - -------- ------ -------- ---- ----- -------------- ----- ----------------- ----- - ----- -- ------- - ----------------- ----- - ----- --------- -- ----- --------- ------- - ----------------- ----- - ------------ - ------- --- ----- ----- -------- ----- - ------------ --- - -------- ----- - ------------ ---------- - -------- ------ -
示例代码
示例代码可以在 npm 包的 GitHub 上的 example 目录中找到。
总结
通过上述使用教程，我们可以轻易的实现一个Tab选项卡的界面效果。该npm包的使用方便，可自定义样式，使得前端开发变得更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671158dd3466f61ffe5d2