其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下
点击左侧菜单栏只刷新局部,局部就用iframe。
布局页
首先先建,建左侧菜单栏,然后下面的@RenderBody ()
& lt; div class=" layui-side layui-bg-black”比;
& lt; div类=發ayui-side-scroll”比;
& lt; !——左侧导航区域(可配合layui已有的垂直导航)——比;
& lt; ul类=" layui-nav layui-nav-tree lay-filter”=安馐浴北?
& lt;李class=" layui-nav-item layui-nav-itemed卡”在
& lt;一个类=" " href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞名片审核& lt;/a>
& lt;/li>
& lt;李类=發ayui-nav-item项目”比;
& lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞项目审核& lt;/a>
& lt;/li>
& lt;李类=發ayui-nav-item基金”在& lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞需求审核& lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt; div类=發ayui-body”比;
@RenderBody ()
@RenderSection(“脚本”,要求:假)
& lt;/div>
然后在最后写上js用于点击跳转,上面的@RenderSection(“脚本”,要求:false)和下面的# demoAdmin都在另一个页面中,也就是放iframe的页面
& lt; script>//JavaScript代码区域
layui。使用(“元素”,函数(){
var=layui.jquery美元
、元素=layui.element;
});
$ (" .Card”)。点击(函数(){
$ (" # demoAdmin”)。attr (“src”、“/Admin/CardManagement”)
});
$ (" . project”)。点击(函数(){
$ (" # demoAdmin”)。attr (“src”、“/Admin/ProjectManagement”)
});
$ (" .Funds”)。点击(函数(){
$ (" # demoAdmin”)。attr (“src”、“/Admin/FundsManagement”)
});
& lt;/script>
新建HomeController,新建索引页面
@ {
布局=零;
布局=" ~/区域/Admin/视图/共享/_Layout.cshtml”;
}
& lt; iframe的src=" https://www.yisu.com/Admin/CardManagement "帧边缘=" 0 " id=" demoAdmin祝辞& lt;/iframe>
{@section脚本
& lt; script>
reHeight ();
美元(窗口)。调整(函数(){
reHeight ();
});//设置iframe高度
函数reHeight () {
var bodyHeight=$(窗口).height ();
bodyHeight=bodyHeight - 107;
如果(bodyHeight<400) {
bodyHeight=400;
}
$ (" # demoAdmin ") .height (bodyHeight);
}
& lt;/script>
引用一下上面的布局。
其他页面引用布局=皛/区域/Admin/视图/共享/_LayoutPage.cshtml”;
我把css和js引用都放在了另一个布局里,所以我需要引用一下,否则页面会乱。
以上这篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
