layui后台布局+实现页面的内部跳转（iframe）

[DCl~~]

最近想使用layui框架作为毕业设计的前端页面，先在layui官网上下载源码包（步骤省略） 打开layui官网，用的是免费的一套后台布局：


把页面源码下载下来部署到自己项目上:



那么怎么实现页面的内部跳转呢？（黑色部分不变，点击相应按钮，白色区域改变）

首先把下面复制到布局的内容主体区域上：
<iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>

导入jquery（这里用jq实现，也可以用内置的jquery或者原生js）：
<script src="../js/jquery-3.3.1.js"></script>

在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值

演示：例如给列表一加上“tatle.html：
”
layui的使用详细可以参考官网：https://www.layui.com/
内容主体区域：



点击列表一：


则实现页面内部跳转，（注意后台未写接口，所以显示请求异常）
以后根据需要添加模块可以直接写在a标签的href上。

结语：这是实现页面内部跳转的一个方法（前端大佬清无视），也可以用前端路由框架，本人小白，以后一起加油!

[东宇科技]

好，学习了。如果是我的话，可能会用到<a href="sss" target="framename"></a>

[文盲老顾]

如果是我的话，可能会用到<base target="framename" />

[如果代码会呼吸]

js判断比直接target要优雅许多，写的非常好，思路很清晰

[颜值六毛六]

给的代码有些有瑕疵 $("iframeMain").attr("src",$(this).attr("href"));： 应是 $("#iframeMain").attr("src",$(this).attr("href"));：

[hookee]

[for__rain]

如果跳转jsp页面就不可以了

[奥地利落榜美术生]

为什么我的只会创建新的窗口

[等的时间长就凉了]

兄弟你选择器少个 # 或者元素选择器用 iframe

[Ge.Programmer]

很棒棒哦！！！

[老男人，]

@sha虫剂 大佬详解一下呗

[sha虫剂]

这个东西其实用router 也就是路由来做 非常简单 需要改变的位置放上<router-view />直接搞定

[不想成为大佬的菜鸟不是好菜鸟]

HTML页面测试成功 ，但是一到jsp就不行了，没有在主体内容区域展示，而是直接跳转新的界面，这是怎么一回事啊，求解

[arsenal_w]

$("iframeMain"),这个选择器应该是$("#iframeMain")吧

[m0_60983762]

这个源码包还有吗，我怎么没找到有免费的

[zwysslh]

a标签中URL和iframe中URL不写清楚就等于没发

[m0_51164909]

为什么就是我不行呀哭哭

[m0_51164909]

原来要映射文件呀操了懂了

[老男人，]

牛牛牛