diff --git a/index.html b/index.html
index b0ed8fd..d8b8d62 100644
--- a/index.html
+++ b/index.html
@@ -123,7 +123,7 @@
                         <i class="iconfont icon-shiyongbangzhu1"></i> 框架使用
                     </a>
                     <dl class="layui-nav-child">
-                        <dd><a href="javascript:;" path="pages/use/use-tab.html" tab-id="10-1"><i class="iconfont icon-tab"></i> Tab使用</a></dd>
+                        <dd><a href="javascript:;" path="pages/use/use-okTab.html" tab-id="10-1"><i class="iconfont icon-tab"></i> okTab使用</a></dd>
 						<dd><a href="javascript:;" path="pages/use/use-okLayer.html" tab-id="10-2"><i class="iconfont icon-layer"></i> okLayer使用</a></dd>
 						<dd><a href="javascript:;" path="pages/use/use-okUtils.html" tab-id="10-3"><i class="iconfont icon-gongju"></i> okUtils使用</a></dd>
 						<dd><a href="javascript:;" path="https://www.layui.com/doc/element/icon.html" tab-id="10-4"><i class="iconfont icon-font"></i> Layui图标</a></dd>
diff --git a/lib/layui_plugins/okTab.js b/lib/layui_plugins/okTab.js
index 87727e8..3a17dc5 100644
--- a/lib/layui_plugins/okTab.js
+++ b/lib/layui_plugins/okTab.js
@@ -1 +1,31 @@
-// 封装okTab组件
\ No newline at end of file
+"use strict";
+layui.define(["element", "layer"], function (exports) {
+    var element = layui.element;
+    var layer = layui.layer;
+    var $ = layui.jquery;
+
+    var okTab = {
+        tabAdd: function (title, path, tabId) {
+            // 去重复选项卡
+            var okFrame = $(".ok-frame");
+            for (var i = 0; i < okFrame.length; i++) {
+                var _tabId = okFrame.eq(i).attr("tab-id");
+                if (_tabId == tabId) {
+                    element.tabChange("ok-tab", tabId);
+                    event.stopPropagation();
+                    return;
+                }
+            }
+            // 添加选项卡
+            element.tabAdd("ok-tab", {
+                title: title,
+                content: "<iframe src='" + path + "' tab-id='" + tabId + "' class='ok-frame' frameborder='0' scrolling='yes' width='100%' height='100%'></iframe>",
+                id: tabId
+            });
+            // 切换选项卡
+            element.tabChange("ok-tab", tabId);
+        }
+    }
+
+    exports("okTab", okTab);
+});
diff --git a/pages/use/use-okTab.html b/pages/use/use-okTab.html
new file mode 100644
index 0000000..a46e63c
--- /dev/null
+++ b/pages/use/use-okTab.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>okTab使用</title>
+    <link rel="stylesheet" href="../../css/okadmin.css">
+</head>
+<body>
+<div class="ok-body">
+    <!--面包屑导航区域-->
+    <div class="ok-body-breadcrumb">
+        <span class="layui-breadcrumb">
+            <a><cite>首页</cite></a>
+            <a><cite>框架使用</cite></a>
+            <a><cite>okTab使用</cite></a>
+        </span>
+        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
+            <i class="layui-icon layui-icon-refresh"></i>
+        </a>
+    </div>
+    <br>
+    <!--代码块1-->
+    <blockquote class="layui-elem-quote">
+        使用方法1：在index.html左侧中添加
+    </blockquote>
+    <pre class="layui-code" lay-title="HTML" lay-encode="true">
+<li class="layui-nav-item">
+    <a class="" href="javascript:;">
+        <i class="iconfont icon-ai-new"></i> XX管理
+    </a>
+    <dl class="layui-nav-child">
+        // tab-id不可和其它菜单重复
+        <dd><a href="javascript:;" path="xx.html" tab-id="xx-1"><i class="iconfont icon-xx"></i> xx列表</a></dd>
+    </dl>
+</li>
+    </pre>
+
+    <!--代码块2-->
+    <blockquote class="layui-elem-quote">
+        使用方法2：在index.html顶部中添加
+    </blockquote>
+    <pre class="layui-code" lay-title="HTML" lay-encode="true">
+<dl class="layui-nav-child">
+    <dd><a href="javascript:;" path="user-center.html" tab-id="0-1">个人中心<span class="layui-badge-dot"></span></a></dd>
+    <dd><a href="javascript:;" path="user-info.html" tab-id="0-2">基本资料</a></dd>
+    <dd><a href="javascript:;" path="user-security.html" tab-id="0-3">安全设置</a></dd>
+    <dd><a href="javascript:;" id="lock">锁定账户</a></dd>
+</dl>
+    </pre>
+
+    <!--代码块3-->
+    <blockquote class="layui-elem-quote">
+        使用方法3：用按钮点击打开
+    </blockquote>
+    <pre class="layui-code" lay-title="JavaScript" lay-encode="true">
+/**
+ * 添加tab
+ * @param title 标题
+ * @param path 路径
+ * @param tabId tabId必须唯一
+ */
+okTab.tabAdd("ok-tool", "http://www.xlbweb.cn", "11-1")
+    </pre>
+    <button class="layui-btn" id="addTab">打开一个新的Tab</button>
+</div>
+<!--js逻辑-->
+<script src="../../lib/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: "../../lib/layui_plugins/"
+    }).extend({
+        okTab: "okTab",
+    }).use(["element", "code", "okTab"], function () {
+        var $ = layui.jquery;
+        layui.code({about: false});
+
+        // TODO bug
+        $("#addTab").click(function () {
+            var okTab = parent.layui.okTab;
+            okTab.tabAdd("ok-tool", "http://tool.xlbweb.cn", "11-1");
+        });
+    })
+</script>
+</body>
+</html>
