layui后台布局+实现页⾯的内部跳转（iframe）
最近想使⽤layui框架作为毕业设计的前端页⾯，先在layui官⽹上下载源码包（步骤省略） 打开layui官⽹，⽤的是免费的⼀套后台布局：
把页⾯源码下载下来部署到⾃⼰项⽬上:
那么怎么实现页⾯的内部跳转呢？（⿊⾊部分不变，点击相应按钮，⽩⾊区域改变）
⾸先把下⾯复制到布局的内容主体区域上：
导⼊jquery（这⾥⽤jq实现，也可以⽤内置的jquery或者原⽣js）：
在jq⽅法体写逻辑：
/
/模拟单页跳转
jquery框架使用$(document).ready(function(){
$(“dd>a”).click(function (e) {
e.preventDefault();
$("#iframeMain").attr(“src”,$(this).attr(“href”));
});
});
逻辑：通过jq拿a的href值放到iframe的src属性上
解释：
e.preventDefault();：设置a的点击事件不跳转到另⼀个页⾯
$("#iframeMain").attr(“src”,$(this).attr(“href”));：给iframe添加src属性，值为a的href值演⽰：例如给列表⼀的a标签加上“tatle.html：
”
内容主体区域：
点击列表⼀：
则实现页⾯内部跳转，（注意后台未写接⼝，所以显⽰请求异常）
以后根据需要添加模块可以直接写在a标签的href上。
layui的使⽤详细可以参考官⽹：www.layui/
结语：这是实现页⾯内部跳转的⼀个⽅法（前端⼤佬请⽆视），也可以⽤前端路由框架，本⼈⼩⽩，以后⼀起加油!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。