目录
一、前言
1. 前言
在上篇文章我们一起利用LayUI实现了动态的左侧菜单栏数据，可是却还没有实现点击菜单建立选项卡并且跳转页面，而这篇文章就让我们一起来实现一波吧！
1.2 选项卡页面静态代码
我们首先在LayUI官网上找到选项卡相关的静态代码放上去：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入LayUI -->
<%@ include file="/common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">会议OA项目</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
</ul>
<!-- 个人头像及账号操作 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="login.jsp">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域（选项卡） -->
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">Leaf</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script>
</script>
</body>
</html>二、动态添加选项卡
2.1 编写动态添加选项卡代码
我们这次把js代码单独封装到一个file类：index.js里面！
这里放上代码~
//JS
let $,element;
layui.use(['element', 'jquery'], function(){
element = layui.element
,$ = layui.jquery;
//绑定菜单数据
$.ajax({
url:'permission.action?methodName=menus'
,dataType:'json'
,success:function(data){
let htmlstr = '';
$.each(data,function(i,n){
htmlstr += '<li class="layui-nav-item layui-nav-itemed">';
htmlstr += ' <a class="" href="javascript:;">'+data[i].text+'</a>';
//判断当前节点是否存在子节点
if(data[i].hasChildren){
htmlstr += '<dl class="layui-nav-child">';
let children = data[i].children;
$.each(children,function(index,node){
htmlstr += '<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';
});
htmlstr += '</dl>';
}
htmlstr += '</li>';
});
$("#menu").html(htmlstr);
}
});
});
//动态添加选项卡
function openTabs(title,url,id) {
let $node = $("li[lay-id='"+id+"']");
//判断
if($node.length == 0){
//新增一个选项卡
element.tabAdd('demo',{
title: title //用于演示
,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
else{
//选中
element.tabChange('demo',id);
}
}这里注意我们写了方法，就要写好点击事件来触发！
2.2 引入写好的js
根据我们建立的js的位置引入！
<script src="static/js/index.js"></script>2.3 测试
我们写好到这一步就可以测试一下了
但是经过测试我们发现还是有不完善的地方，比如：
会重复建立选项卡；
选项卡名称不是菜单名；
三、完善动态选项卡
3.1 在<!-- 内容主体区域 -->加入lay-filter="demo"
我们只需要在内容主体区域的这行代码加入lay-filter="demo"就好了：
<!-- 内容主体区域 -->
<div class="layui-tab" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">Leaf</div>
</div>
</div>测试结果
到这里我们就写好啦，我们直接测试一下！
OK，以上就是Leaf今天带来的学习笔记分享，我们下次见啦！！！
版权声明：本文为qq_63492318原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。