我们可以利用树实现菜单的显示，但是我们需要每点击一个菜单在右侧实现一个选项卡，这个就需要easyui里面的选项卡的功能

我们写一个代码

 <%--创建选项卡容器--%>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'">
        <%--选项卡面板--%>
        <div title="第一个" style="padding:20px;display:none;">
            <%--linkbutton组件效果--%>
            <a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">测试linkbutton按钮</a>

        </div>
         <%--选项卡面板--%>
        <div title="第二个" style="padding:20px;display:none;">
            <%--linkbutton组件效果--%>
            <a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">测试linkbutton按钮</a>

        </div>
    </div>

最外层的div就是设置这个div为选项卡，里面有几个内部的div，那么就有几个选项卡，只要写了上面的代码，那么我们在页面就可以看到

因为里面写了两个内部的div，那么就可以看到两个选项卡

每一个标签卡里面的属性配置，那么就可以使用api里面的

以上是介绍了选项卡的实现

那么如何将菜单和选项卡联动起来呢？实现的效果为

[1] 功能需求

点击树状菜单的时候，可以在页面的中心区域中新增一个选项卡，显示当前
菜单的资源。如果当前菜单对应的选项卡已经存在，则不会重新创建，而是
选择已经存在的选项卡显示给用户。具有子菜单的一级菜单是无需创建选项卡的

[2] 功能实现

① 给树状菜单的节点增加单击事件
② 在树节点的单击事件中校验当前点击的是资源跳转菜单还是一级菜单
③ 在树节点的单击事件中增加新增选项卡的逻辑
④ 判断菜单节点的选项卡是否存在如果已经存在，则选中，而不是创建

[3] 示例代码

先是菜单的代码，这个代码的样式是使用easyui的树class=“easyui-tree”

 <%--声明树状的ul容器--%>
            <ul id="myTree" class="easyui-tree">
                <%--声明一级菜单--%>
                <li>
                    <span>超市购物网站</span>
                    <%--声明二级菜单细信息--%>
                    <ul>
                        <li>天猫超市</li>
                        <li>京东超市</li>
                        <li>永辉超市</li>
                    </ul>
                </li>
                <%--声明一级菜单信息--%>
                <li>
                    <span>电器购物网站</span>
                    <%--声明二级菜单信息--%>
                    <ul>
                        <li>京东</li>
                        <li>苏宁</li>
                        <li>国美</li>
                    </ul>
                </li>
                <%--普通一级菜单--%>
                <li><span>淘宝网</span></li>
            </ul>

以上的代码界面效果是

之后开始创建选项卡的代码

 <%--创建选项卡容器--%>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'">


    </div>

以上的选项卡的只是写了一个最外层的div，在界面是没效果的。如果我们在里面写几个内部的div，就会有效果。但是现在是点击了菜单之后，里面才建立内部的div，所以需要在菜单按钮上面加事件。

菜单上面加事件，事件方法里面创建选项卡，这样菜单和选项卡就通过事件连接起来了

 /****************设置树组件*************************/
        $(function () {
   
            $("#myTree").tree({
   
                onClick:function (node) {
   
                    //判断当前点击的节点是否具有子节点
                    console.log(node);
                    var cs=node.children;
                    判断是不是一级菜单
                    if(!cs){
   
                        //判断菜单节点的选项卡是否存在
                        var flag=$("#tt").tabs('exists',node.text);
                        if(flag){
   
                            //选中菜单节点对用的选项卡
                            $("#tt").tabs('select',node.text);
                        }else{
   
                            //新增选项卡
                            $("#tt").tabs('add',{
   
                                title:node.text,
                                closable:true
                            })
                        }

                    }
                }

            })
        })

写了以上的代码，就实现了联动，就实现了效果图

菜单的实现是使用的easyui的树，UI标签上面写class="easyui-tree"就可以展现菜单形状了，UI里面的li就是子菜单

我们利用js

  $(function () {
   
            $("#myTree").tree({
   
                onClick:function (node) {

这个onClick点击事件，node参数就是我们点击的哪个菜单，node里面的信息就是哪个菜单的。
我们在控制台输出node，就可以看到，点击不同的菜单，输出的就不一样。如果一级菜单下有二级菜单，输出的node里面就有属性chridren.。我们可以根据有没有这个属性判断是不是一级菜单。

onClick:function (node) {
   
                    //判断当前点击的节点是否具有子节点
                    console.log(node);
                    var cs=node.children;
                    判断是不是一级菜单
                    if(!cs){

因为只有没有子菜单的按钮，才可以弹出选项卡，所以，只要用if判断了没有children，那么里面就可以写关于选项卡的代码了。

  if(!cs){
   
                        //判断菜单节点的选项卡是否存在
                        var flag=$("#tt").tabs('exists',node.text);
                        if(flag){
   
                            //选中菜单节点对用的选项卡
                            $("#tt").tabs('select',node.text);
                        }else{
   
                            //新增选项卡
                            $("#tt").tabs('add',{
   
                                title:node.text,
                                closable:true
                            })
                        }

以上就是思路