easybootstraptabs 是一个基于 Bootstrap4 的标签页插件，它可以帮助开发者快速搭建界面并实现页面操作。在这篇文章中，我们将详细介绍 easybootstraptabs 的使用方法和一些注意事项。
安装
easybootstraptabs 可以通过 npm 安装，命令如下：
npm install easybootstraptabs --save
使用
在 HTML 中先加入 Bootstrap 和 easybootstraptabs 相关的 CSS 和 JS。
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/easybootstraptabs/dist/easybootstraptabs.min.js"></script>
接着在 HTML 中添加一个容器，容器内部加入需要使用的标签页。
-- -------------------- ---- -------
---- -------------------
--- ---------- ----------
--- -----------------
-- --------------- ------- ----------------- ---------------------
-----
--- -----------------
-- ---------------- ----------------- ---------------------------
-----
--- -----------------
-- ---------------- ----------------- ---------------------------
-----
-----
---- --------------------
---- --------- --------------- ---- ---- --------
-------------
----------
------
---- ------------ --------------- ------
----------------
----------
------
---- ------------ --------------- ------
----------------
----------
------
------
------最后在 JavaScript 中初始化 easybootstraptabs 插件即可。
$(document).ready(function(){
$('#tab-container').easybootstraptabs();
});配置
easybootstraptabs 插件有许多可配置项，通过传递一个对象即可实现自定义配置。
-- -------------------- ---- ------- --------------------------------------- ---------- ----- ---------- ---------- ------- ------- ---------- --- --------------- --------- ------------- --- ------------------- --------- ---------------- --- -------------- ----- ------------- ----- --------- -- --------- ----- --------- ------ ---------- ---- --------------- ------------- ------------ ------ ------- ------ ------------- --- ------------ -------- ------------- --- ------------ ------- ---
下面给出一些比较常用的配置项：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| animation | boolean | true | 是否开启动画效果 |
| animating | string | fadeOut | 动画效果 |
| effect | string | fade | 显示效果，可以为 'fade', 'slide' |
| hashTracking | boolean | true | 是否开启 URL 哈希跟踪 |
| startTab | number | 1 | 默认开始展示的标签页索引 |
| keyboard | boolean | true | 是否开启键盘控制标签页 |
| closeBtn | boolean | false | 是否开启关闭按钮 |
| closeParent | boolean | false | 点击关闭按钮时是否只关闭当前标签页 |
| navBtn | boolean | false | 是否开启左右切换按钮 |
| prevBtnText | string | '<' | 切换按钮的文本内容 |
| nextBtnText | string | '>' | 切换按钮的文本内容 |
示例
以下是一个完整的 easybootstraptabs 的使用示例。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --------- ---- ------------
----- -------------------------------------------------------------------------------------- -----------------
-------
------
---- ------------------
--- ------------------ ---- ---------- --------- ---- ---------
---- -------------------
--- ---------- ----------
--- -----------------
-- --------------- ------- ----------------- ---------------------
-----
--- -----------------
-- ---------------- ----------------- ---------------------------
-----
--- -----------------
-- ---------------- ----------------- ---------------------------
-----
-----
---- --------------------
---- --------- --------------- ---- ---- --------
-------------
----------
------
---- ------------ --------------- ------
----------------
----------
------
---- ------------ --------------- ------
----------------
----------
------
------
------
------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
--------
-----------------------------
---------------------------------------
---------- -----
---------- ----------
------- -------
------------- -----
--------- --
--------- -----
--------- -----
---------- ----
--------------- -------------
------------ ------
------- -----
------------- ---
------------ --------
------------- ---
------------ -------
---
---
---------
-------
-------总结
easybootstraptabs 插件是一个非常方便实用的标签页插件，使用方法简单，同时有很多可配置项，可以帮助开发者快速搭建界面和实现页面操作。在使用时需要注意的是，要记得先引入 Bootstrap 的 CSS 和 JS，否则 easybootstraptabs 无法正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaa81e8991b448dc1a2