layui添加动态菜单与选项卡创建交互式、快速动态网页应用的网页开发技术请求的例子

如下所示：

超文本标记语言

！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1 ' title layui/title link rel='样式表href=' js/CSS/layui。CSS ' rel=' external no follow ' media=' all '/head body div class=' layui-side layui-BG-black ' div class=' layui-side-scroll '！-左侧导航区域（可配合获得已有的垂直导航)-ul class=' layui-nav layui-nav-tree ' lay-filter=' test ' id=' memus '/ul/div/div class=' layui-body '！-动态选项卡-div id=' tabzu ' class=' layui-tab layui-tab-card layui-tab-brief ' lay-filter=' tabDemo ' lay-allow close=' true ' ul class=' layui-tab-title '/ul div class=' layui-tab-content '/div/div/script src=' http : js/layui。全部。js ' charset=' utf-8 '/脚本类型=' text/JavaScript ' src=' http 333

layui.use('element '，function(){ function CheckLastItem(arr，I){ return arr。长度==(I ^ 1)；}函数getHTMl(obj){ return ' a href=\ ' JavaScript :\ n单击=\ ' AddTab(' obj。名称' '，对象。URL ' ')\ ' obj。名称'/a '；} //动态菜单拉威。jquery。Ajax({ URL : ' http://127。0 .0 .1:18000/sys/menu '，method: 'POST '，success 3360 function(RES){ var html=' '；for(var I=0；一。长度；I){ var strli=' Li class=\ ' layui-nav-item lay-unselect \ '；如果（第[i]号决议)。URL==' # '){ strli=strli ' a href=\ ' JavaScript 3:RES[I].名称/a '；console.log(res[i]).name)} else { strli=strli GetHTMl(RES[I])；} if(res[i].pId=='0 '！检查最后一项(res，i) res[i 1].pId！=' 0 '){ strli=strli ' dl class=\ ' layui-nav-child \ '；for(；检查最后一项(res，i) res[i 1].pId！='0';I){ strli=strli ' DD ' GetHTML(RES[I 1])'/DD '；} strli=strli '/dl '；} strli=strli '/Li '；html=html strli } layui . jquery(' # memus ').html(html)；拉威。元素。init()；//一定初始化一次} })});//添加选项卡函数addTab(名称，url) { if(layui.jquery)' .李[lay-id=' name ' ']').长度0) { //选项卡已经存在拉威。元素。tabChange(' tabDemo '，名称);layer.msg('切换-(姓名)} else { //动态控制内联框架高度var tabheight=layui.jquery(窗口)。高度()-95;内容txt=' iframe src=' http : ' URL ' '滚动=' no ' width=' 100% ' height=' '(tab height)' PX '/iframe '；//新增一个标签项layui.element.tabAdd('tabDemo '，{ title: name，content: contentTxt，id: name }) //切换刷新拉威。元素。TabChange(' Tabdemo '，名称)layer.msg('新增-(姓名)}}菜单数据

[ { 'name': '首页，' URL ' : ' shouye.html '，' id': '1 '，' pId': '0' }，{ 'name': '数据库，' url': '# '，' id': '1 '，' pId': '0' }，{ 'name': 'MYSQL '，' url': 'mysql.html '，' id': '2 '，' pId': '1' }，{ 'name': 'ORACLE '，' url': 'oracle.html '，' id': '3 '，' PiD ' 33330开发语言，' url': '# '，' id': '4 '，' pId': '0' }，{ 'name': 'JAVA '，' url': 'java.html '，' id': '5 '，' pId': '4' }，{ 'name': 'Python '，' url': 'python.html '，' id': '6 '，' PiD ' 3:效果截图

以上这篇获得添加动态菜单与选项卡创建交互式、快速动态网页应用的网页开发技术请求的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。