layui实现左侧菜单点击右侧内容区显示实现左侧菜单点击右侧内容区显示
主要为大家详细介绍了layui实现左侧菜单点击右侧内容区显示，具有一定的参考价值，感兴趣的小伙伴们可以
参考一下
layui这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚
好最近需要开发一个后台管理项目，就拿layui来进行学习和实践。
还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块
今天我们先来学习一下使用layui来实现左侧点击菜单，内容区显示tab
实验效果实验效果
实现过程实现过程
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php echo $curTitle;?></title>
<link rel="stylesheet" href="js/layui/css/layui.css" >
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">XXXX业务管理平台</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
欢迎光临，商户001
</li>
<li class="layui-nav-item"><a href="">安全退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧垂直导航区域-->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;" >管理员管理</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" data-id="1" data-title="管理员列表" data-url="index.php?&a=adminList"
class="site-demo-active" data-type="tabAdd">管理员列表</a></dd>
<dd><a href="javascript:;" data-id="2" data-title="管理员日志" data-url="index.php?&a=adminLogList"
class="site-demo-active" data-type="tabAdd">管理员日志</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" >交易管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" data-id="" data-id="3" data-title="存款列表"
data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">存款列表</a>
</dd>
<dd><a href="javascript:;" >代付列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" >系统管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" >支付API设置</a></dd>
<dd><a href="javascript:;" >公告设置</a></dd>
<dd><a href="javascript:;" >控制台</a></dd>
</li>
</ul>
</div>
</div>
<!--tab标签-->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title"></ul>
weixin_38733414
- 粉丝: 11
- 资源: 988
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
- MW全能培训汽轮机调节保安系统PPT教学课件.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0