1. 切换选项卡的方法
0511.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面名称 -->
<title>layui实操</title>
<!-- 通过第三方CDN方式引入 -->
<!-- 通过第三方CDN方式引入 layui.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.2/css/layui.min.css" rel="stylesheet">
<!-- 通过第三方CDN方式引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.2/layui.min.js"></script>
<!-- 设置图标与文字的间隔 -->
<style>
.iconset{
margin-right: 10px;
}
</style>
</head>
<body>
<div class="layui-layout-admin">
<!-- 头部开始 -->
<div class="layui-header">
<!-- 左侧 logo样式 （layui中默认的是绿色）-->
<div class="layui-logo">LOGO</div>
<!-- 右侧 登录信息 （含下拉） -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">Betsy</a>
<dl class="layui-nav-child">
<dd><a href="">个人信息</a></dd>
<dd><a href="">退出</a></dd>
</dl>
</li>
</ul>
</div>
<!-- 头部结束 -->
<!-- 左侧导航开始 -->
<div class="layui-side" style="background-color:#222222;">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right:10px;">
<!-- layui-nav-itemed表示item选中呈展开状 -->
<li class="layui-nav-item layui-nav-itemed">
<!-- javascript:;一定要注意加上，不然点击样式出不来 -->
<a href="javascript:;"><i class="layui-icon layui-icon-set iconset"></i>栏目1</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" data-type="toAdd" class="subMenu" data-id="1" data-title="栏目1-1" data-url="test1-1.html">
栏目1-1
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<!-- iconset是自定义的，用来设置：图标和文字之间的距离 -->
<a href="javascript:;"><i class="layui-icon layui-icon-read iconset"></i>栏目2</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" data-type="toAdd" class="subMenu" data-id="2" data-title="栏目2-1" data-url="test2-1.html">栏目2-1</a>
</dd>
<dd>
<a href="javascript:;" data-type="toAdd" class="subMenu" data-id="3" data-title="栏目2-2" data-url="test2-2.html">栏目2-2</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<!--左侧导航结束 -->
<!-- 中间主体开始 -->
<div class="layui-body" id="container">
<div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
<ul class="layui-tab-title"></ul>
<div class="layui-tab-content"></div>
</div>
</div>
<!-- 中间主体结束 -->
<!-- 底部开始 -->
<div class="layui-footer">
<center>XXX版权所有</center>
</div>
<!-- 底部结束 -->
</div>
<!-- js 添加点击响应 -->
<script>
layui.use(['element'], function() {
var element = layui.element;
var $ = layui.$;
//左侧导航栏
$('.subMenu').on('click', function() {
var dataid = $(this);
//1. 判断.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
//如果比零小，则直接打开新的tab项
if ($(".layui-tab-title li[lay-id]").length <= 0)
{
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
}
//2. 否则判断该tab项是否在.layui-tab-title存在
else
{
//初始化一个标志，为false说明未打开该tab项 为true则说明已有
var isData = false;
//遍历layui-tab-title已经存在的tab
$.each($(".layui-tab-title li[lay-id]"), function() {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == dataid.attr("data-id"))
{
isData = true;
}
});
//标志为false 新增一个tab项
if (isData == false)
{
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
}
}
//3. 不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
});
//计算iframe的大小
function FrameWH() {
var h = $(window).height();
$("iframe").css("height", h + "px");
}
//active对象绑定事件， 而后可通过active来调用方法
var active = {
//1. 新增tab项
tabAdd: function(url, id, name) {
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
//tabs:中间主体的fiter名
element.tabAdd('tabs', {
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
'" style="width:100%;height:99%;"></iframe>',
id: id //规定好的id
})
FrameWH(); //计算ifram层的大小
},
//2. 换到指定Tab项
tabChange: function(id) {
element.tabChange('tabs', id);
},
//3. 删除
tabDelete: function(id) {
element.tabDelete("tabs", id);
}
};
});
</script>
</body>
</html>test1-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1-1</title>
</head>
<body>
<h1>welcome to test1-1 !</h1>
</body>
</html>test2-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test2-1</title>
</head>
<body>
<h1>welcome to test2-1 !</h1>
</body>
</html>test2-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test2-2</title>
</head>
<body>
<h1>welcome to test2-2 !</h1>
</body>
</html>运行结果：
3325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
