Layui实现左侧菜单点击右侧内容区域显示

时间：2023-04-02 11:46:59 HTML

layui的前端框架为后端人员提供了极大的便利。大量的同学在刚接触到这个框架的时候就迫不及待的去实践了。刚好最近需要开发一个后台管理的项目，所以使用layui进行学习。和练习。没有接触过的同学可以先通读一下文档，遇到问题可以对症下药，认真学习相关章节。今天先来学习下如何使用layui实现左键菜单，内容区域显示tab实验效果。处理html代码<?phpecho$curTitle;?>XXXX业务管理平台

欢迎，商户001安全出口

管理员管理

AdminList

管理员日志

事务管理

存款清单

支付清单

系统管理

支付API设置

通知设置

控制台

?sunway.tkXXXX业务管理平台javascript代码：layui.use(['element','layer','jquery'],function(){varelement=layui.element;//varlayer=layui.layer;var$=layui.$;//配置选项卡实践无法获取下面的菜单元素$('.site-demo-active').on('click',function(){vardataid=$(this);//此时会判断.layui-tab-title属性下lay-id属性lis的个数对，也就是已经打开的tab项数if($(".layui-tab-titleli[lay-id]").length<=0){//如果小于零，则打开一个新的tabitem直接active.tabAdd(dataid.attr("data-url"),dataid.attr("data-id"),dataid.attr("data-title"));}else{//否则判断是否tabitemexistsandexistsvarisData=false;//初始化一个flag，如果为false，表示tabitem没有打开，如果为true，表示已经$.each($(".layui-tab-titleli[lay-id]"),function(){//如果点击左侧菜单栏传入的id，可以在右侧tab项的lay-id属性中找到，即表示标签项已经打开if($(this).attr("lay-id")==dataid.attr("data-id")){isData=true;}})if(isData==false){//标志为false，增加一个新的标签项active.tabAdd(dataid.attr("data-url"),dataid.attr("data-id"),dataid.attr("data-title"));}}//最后不管有没有新增tab，最后都转到要打开的选项页面active.tabChange(dataid.attr("data-id"));});varactive={//这里给active绑定几个事件，后面可以通过active调用tabAdd:function(url,id,name){//添加一个新的Tab项，传入三个参数，分别对应它的标题，tab页的地址，一个指定的id是tag中data-id的属性值//tabAdd方法传入的参数见layui开发文档的基本方法部分element.tabAdd('demo',{title:name,content:'',id:id//规定的id})FrameWH();//计算ifram层的大小},tabChange:function(id){//切换到指定的Tab项element.tabChange('demo',id);//根据传入的id输入到指定的tab项},tabDelete:function(id){element.tabDelete("demo",id);//删除}};functionFrameWH(){varh=$(window).height();$("iframe").css("高度",h+"px");}});实现逻辑：动态判断被点击的menu元素，利用元素上设置的data属性值，在右侧内容区域生成一个页面iframe进行动态展示。参考资料：layui官网

上一篇：js数组去重的七种常用方法

下一篇：css双飞翼布局

Layui实现左侧菜单点击右侧内容区域显示相关文章