??????? 在使用easyui搭建好后臺的界面之后，接下來需要做的就是為每個菜單項添加相應的界面來實現和數據的交互。今天將介紹如何實現點擊某個菜單項來實現在后臺顯示出響應的界面。

首先展示下最終的效果：通過點擊“新增新聞”，然后在中部顯示新增新聞的對應頁面

實現的代碼很簡單：

javascript代碼：

/**添加選項卡方法*/function addTab(title,url){url = url;var tab=$('#tt').tabs('exists',title); //判斷tab是否已經存在if(tab){ //防止tab重復添加$('#tt').tabs('select',title); //如果已經存在tab，則刷新該界面}else{ //如果不存在該界面則加載$('#tt').tabs('add',{title:title,content:"<iframe width='100%' height='100%' frameborder='0' scrolling='yes' src='"+url+"'></iframe>",closable:true //true表示在tab上顯示一個關閉按鈕});}}
頁面相關代碼：

<div id="tt" class="easyui-tabs" fit="true" border="false"> <div title="主頁"><iframe width='100%' height='100%' id='iframe' frameborder='0' scrolling='no' src='blank.jsp'></iframe></div> </div>

<div title="新聞管理" data-options="iconCls:'icon-lesson'" style="padding:10px;"><div class="menu-div" οnmοuseοver="omo(this,0)" οnmοuseοut="omo(this,1)" οnclick="addTab('我的頁面','/mssh/my.jsp')"><span class="icon-span">&nbsp;&nbsp;&nbsp;</span>??新增新聞</div></div>

總結

以上是生活随笔為你收集整理的easyui后台界面如何添加选项卡(Tab)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。