easyui实现tabs选项卡之间的切换（只显示一个）

来源：互联网发布：男裤淘宝网编辑：程序博客网时间：2024/05/16 07:38

一、创建菜单项

<div class="easyui-accordion" id="wl_accordion" data-options="fit:true,border:false"><div title="aa" data-options="iconCls:'icon-hamburg-graphic'" style="overflow:auto;">                <ul class="easyui-tree">                    <li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="aa1url" name="icon-hamburg-monitor">aa1</a></li>                </ul>        </div><div title="bb" data-options="iconCls:'icon-hamburg-graphic'" style="overflow:auto;">                <ul class="easyui-tree"><li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="bb1url" name="icon-hamburg-monitor">bb1</a></li><li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="bb2url" name="icon-hamburg-monitor">bb2</a></li>                </ul>       </div></div>

二、点击菜单生成tabs选项卡，并添加刷新按钮，实现选项卡之间切换（只显示一个）

$(".tree-node").click(function () {var title = $(this).find(".btn_menu").text();var url = $(this).find(".btn_menu").attr("url");var icon = $(this).find(".btn_menu").attr("name");var isSelect = $("#tabs").tabs('exists', title);var strHtml = '<iframe src="' + url + '" frameborder="0" width="100%" height="100%" marginwidth="0px" marginheight="0px" scrolling="no" style="display:block"></iframe>';//'exists' 方法来判断 tab 是否已经存在，如果为true，则选中tabif (isSelect) {$("#tabs").tabs('select', title);return;}else{$(".tabs li").each(function (index, obj) {//获取所有可关闭的选项卡var tab = $(".tabs-closable", this).text();$(".easyui-tabs").tabs('close', tab);});//添加tab菜单$("#tabs").tabs('add', {title: title,content: strHtml,closable: true,iconCls: icon,//刷新按钮tools: [{iconCls: 'icon-mini-refresh',handler: function(){$('.panel:visible > .panel-body > iframe').get(0).contentDocument.location.reload(true);}}]});}});

0 0