layui添加动态菜单与选项卡
本文实例为大家分享了layui添加动态菜单与选项卡的具体代码,供大家参考,具体内容如下
创新互联建站是一家专注于成都做网站、网站制作与策划设计,乌当网站建设哪家好?创新互联建站做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:乌当等地区。乌当做网站价格咨询:028-86922220
HTML
Layui
index.js
layui.use('element', function() { function checkLastItem(arr, i) { return arr.length == (i + 1); } function getAhtml(obj){ return "" + obj.name + ""; } //动态菜单 layui.jquery.ajax({ url: "http://127.0.0.1:18000/sys/menus", method: 'POST', success: function(res) { var html = ""; for(var i = 0; i < res.length; i++) { var strli = "
- ";
for(; !checkLastItem(res, i) && res[i + 1].pId != "0"; i++) {
strli = strli + "
- "+getAhtml(res[i+1])+" "; } strli = strli + "
菜单JSON
[ { "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": "1" }, { "name": "开发语言", "url": "#", "id": "4", "pId": "0" }, { "name": "JAVA", "url": "java.html", "id": "5", "pId": "4" }, { "name": "Python", "url": "python.html", "id": "6", "pId": "4" } ]
效果截图:
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前标题:layui添加动态菜单与选项卡
网站链接:http://pwwzsj.com/article/jphdjp.html