js layui跳转页面_Layui后台实现页面内部的iframe跳转

最近在学习Layui的过程中，遇到了内部iframe在点击侧边栏之后无法跳转的情况，故记录此解决方案以做备忘，防止下次再有这样的事情发生。

页面想点击左边和上面的侧边栏，然后只在右边的主体白色部分进行页面的转变。

首先把下面复制到布局的内容主体区域上：

导入jquery(这里用官网jq实现，也可以用内置的jquery或者原生js)：

$(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值

侧边栏设置跳转链接像是这样，设置  dd  格式类同"显示表单"与“news”.

头部栏设置跳转链接像是这样，设置  li  格式类同“用户”。

iframe设置id，格式类同上图。

script设置   li 与  dd  的格式

设置后跳转就只在右侧主体界面显示而不改变其他设置。

原文：https://www.cnblogs.com/himurayaiba/p/12527497.html