利用easyui实现菜单节点和选项卡的联动效果

最新推荐文章于 2022-11-03 16:47:13 发布

原创

最新推荐文章于 2022-11-03 16:47:13 发布 · 854 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #css

本文介绍如何使用EasyUI实现在点击树状菜单时，动态创建或切换选项卡，展示菜单对应的内容，适用于需要菜单导航和内容展示的Web应用。

我们可以利用树实现菜单的显示，但是我们需要每点击一个菜单在右侧实现一个选项卡，这个就需要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>