最近想使用layui框架作为毕业设计的前端页面,先在layui官网上下载源码包(步骤省略) 打开layui官网,用的是免费的一套后台布局:
把页面源码下载下来部署到自己项目上:
那么怎么实现页面的内部跳转呢?(黑色部分不变,点击相应按钮,白色区域改变)
首先把下面复制到布局的内容主体区域上:
导入jquery(这里用jq实现,也可以用内置的jquery或者原生js):
在jq方法体写逻辑:
//模拟单页跳转
$(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的使用详细可以参考官网:https://www.layui.com/
结语:这是实现页面内部跳转的一个方法(前端大佬请无视),也可以用前端路由框架,本人小白,以后一起加油!