<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>需求</title> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="dtree2/layui/css/layui.css"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <!--1.頭部區域--> <div class="layui-header"> <div class="layui-logo">后台管理 你好！${username}</div> <!-- 頭部區域（可配合layui已有的水平導航） --> <ul class="layui-nav layui-layout-left"> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> ${username} </a> <dl class="layui-nav-child"> <dd><a href="${pageContext.request.contextPath}/QuestServlet?method=search&way=usersee&username=${username}">基本資料</a></dd> <dd><a href="${pageContext.request.contextPath}/QuestServlet?method=search2&username=${username}">密碼修改</a></dd> </dl> </li> <li class="layui-nav-item"><a href="login.jsp">退了</a></li> </ul> </div> <!--2.左側導航--> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側導航區域（可配合layui已有的垂直導航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item leftdaohang" data-url="${pageContext.request.contextPath}/QuestServlet?method=quest&workplace=${workplace}&code=${code}" mytitle="需求填表"><a>需求填表</a></li> <li class="layui-nav-item leftdaohang" data-url="${pageContext.request.contextPath}/tabletest.jsp" mytitle="網絡審核"><a>網絡審核</a></li> <li class="layui-nav-item leftdaohang" data-url="${pageContext.request.contextPath}/tablesettle.jsp?workplace=${workplace}" mytitle="需求管理"><a>需求管理</a></li> </ul> </div> </div> <!--3.右側主體內容區--> <div class="layui-body"> <!--tabs標簽--> <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true"> <ul class="layui-tab-title"> <!--<li class="layui-this">角色管理</li>--> </ul> <div class="layui-tab-content" style="height: 150px;"> <!--<div class="layui-tab-item layui-show"> 1. 我個人比較喜歡卡片風格的，所以你發現又是以卡片的風格舉例 2. 刪除功能適用於所有風格 </div>--> <!--<div class="layui-tab-item"> <iframe style="width: 100%;height: 100%;" scrolling="no" src="jiaose.html" ></iframe> </div>--> </div> </div> </div> <!--4.底部固定區域--> <div class="layui-footer"> <!-- 底部固定區域 --> © layui.com - 底部固定區域 </div> </div> <script src="dtree2/layui/layui.all.js"></script> <script> layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模塊 //觸發事件 var active = { tabAdd: function(){ //新增一個Tab項 var htmlurl=$(this).attr('data-url'); var mytitle=$(this).attr('mytitle'); //alert("觸發tab增加事件："+mytitle); //先判斷是否已經有了tab var arrayObj = new Array();//創建一個數組 $(".layui-tab-title").find('li').each(function() { var y = $(this).attr("lay-id"); arrayObj.push(y); }); // alert("遍歷取到的數組："+arrayObj); var have=$.inArray(mytitle, arrayObj); //返回 3, if (have>=0) { //tab已有標簽 // alert("遍歷的已有標簽："+mytitle); element.tabChange('demo', mytitle); //切換到當前點擊的頁面 } else{ //沒有相同tab // alert("遍歷的沒有相同tab："+mytitle); element.tabAdd('demo', { title:mytitle //用於演示 ,content: '<iframe style="width: 100%;height: 100%;" scrolling="no" src='+htmlurl+' ></iframe>' ,id: mytitle //實際使用一般是規定好的id，這里以時間戳模擬下 }) element.tabChange('demo', mytitle); //切換到當前點擊的頁面 } } }; $(".leftdaohang").click(function(){ var type="tabAdd"; var othis = $(this); // var htmlurl=$(this).attr('data-url'); // var mytitle=$(this).attr('mytitle'); active[type] ? active[type].call(this, othis) : ''; }); }); </script> </body> </html>
這里我是從layui官網直接獲取的代碼 它右部實體的高度是設置有問題需要改一下 可以從它的layui.css 中改.layui-tab-item設置一個高度或者是直接在jsp中加一個style
<style>
.layui-tab-item {
display: none;
height: 50px;
}
</style>