获得这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚好最近需要开发一个后台管理项目，就拿获得来进行学习和实践。

还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块今天我们先来学习一下使用获得来实现左侧点击菜单，内容区显示标签

实验效果

实现过程

超文本标记语言代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，用户可缩放=否，初始比例=1.0,最大比例=1.0,最小比例=1.0 ' meta http-equiv=' X-UA-Compatible '内容=' ie=edge '标题？php echo $ curTitle？/title link rel='样式表href=' js/layui/CSS/layui。CSS/head body class=' layui-layout-body ' div class=' layui-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 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 3:'数据-id='1 '数据-标题='管理员列表data-url='index.php？a=AdminList ' class=' site-demo-active '数据类型='tabAdd '管理员列表/a/DD DDA href=' JavaScript :'数据-id='2 '数据-标题='管理员日志data-url='index.php？a=AdminLogList ' class=' site-demo-active '数据类型='tabAdd '管理员日志/a/DD/dl/Li Li class=' layui-nav-item ' a href=' JavaScript :'交易管理/a dl class=' layui-nav-child ' DDA href=' JavaScript 3:data-id=' ' data-id=' 3 ' data-title='存款列表data-url='index.php？a=AdminList ' class=' site-demo-active '数据类型='tabAdd '存款列表/a/DD DDA href=' JavaScript :'代付列表/a/DD/dl/Li Li class=' layui-nav-item ' a href=' JavaScript :'系统管理/a dl class=' layui-nav-child ' DDA href=' JavaScript 3:'支付应用程序接口设置/a/DD DDA href=' JavaScript :'公告设置/a/DD DDA href=' JavaScript :'控制台/a/dd /li /ul /div /div！-标签标签-div class=' layui-tab ' lay-filter=' demo ' lay-allow close=' true ' style=' margin-left : 200px；'ul class=' layui-tab-title '/ul div class=' layui-tab-content '/div/div class=' layui-页脚style=' text-align : center'！-底部固定区域电影站业务管理平台/div/div脚本src=' http :/js/layui/layui。js '/脚本脚本！-这里是放置射流研究…代码区域-/脚本/正文/htmljavascript代码：

layui.use(['element '，' layer '，' jquery']，function(){ var element=layui . element；//var layer=layui . layer；var $=layui。$;//配置选项卡练习无法获取菜单元素$()。网站-演示-活动’)。on ('click ')，function(){ vardataid=$(this)；//这时，右边下有lay-id属性的li数。将判断layui-tab-title属性，即如果($(')已经打开的tab项目数。layui-tab-title李[lay-id]')。长度=0){//如果小于零，则打开活动的新选项卡项。直接tabadd (dataid.attr ('data-URL ')、dataid.attr ('data-id ')、dataid . attr(' data-title '))；} else {//否则，判断tab项是否存在。var isData=false//初始化标志。如果为假，则表示选项卡项未打开。如果是真的，说明已经有$。每个($(')。layui-tab-title li [lay-id]')，function(){//如果点击左侧菜单栏传递的id，可以在右侧选项卡项的lay-id属性中找到。如果($ (this)，则标签项已被打开。attr ('lay-id')==dataid。attr(' data-id '){ is data=true；} }) if (isData==false) {//添加一个活动的选项卡项。tabadd (dataid.attr ('data-URL ')、dataid.attr ('data-id ')、data id . attr(' data-title '))；} }//最后，不管是否添加tab，都转到要打开的选项页上的active . tab change(dataid . attr(' data-id '))；});Var active={//在这里将几个事件绑定到active，然后通过active {//调用这些事件Tabadd:函数(URL、id、name)添加一个tab项，传入三个参数，分别对应其标题、tab页的地址和一个指定的ID。是标记中data-id的属性layui。tabAdd的方法传入的参数可以在basic method part元素中找到. tabadd ('demo '，{title : name，content : ' iframe data-frame id=' id ' ' scrolling=' auto ' frame border=' 0 ' src=' http : ' URL ' ' style=' width 3360100 '；高：99%；/iframe '，id: id //指定的id })frame wh()；//计算ifram层的大小}、Tabchange :函数(id){//切换到指定的tab item元素. tabChange('demo '，id)；//根据传入的id传入指定的tab项，tabdelete :函数(id) {element。tabdelete ('demo '，id)；//删除} }；函数FrameWH() { var h=$(window)。高度()；$(“iframe”)。css('height '，h ' px ')；} });实现逻辑：动态判断被点击的菜单元素，利用元素上设置的数据属性值，在右侧内容区生成页面iframe进行动态显示。参考资料：拉威官网

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。