溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
其實這篇文章是給自己看的，以后忘記怎么做回來還能看一下
點擊左側菜單欄只刷新局部，局部就用iframe。
首先先建layout頁，建左側菜單欄，然后下面的@RenderBody（）
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed Card">
<a class="" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >名片審核</a>
</li>
<li class="layui-nav-item Project">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >項目審核</a>
</li>
<li class="layui-nav-item Funds"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >需求審核</a></li>
</ul>
</div>
</div>
<div class="layui-body">
@RenderBody()
@RenderSection("scripts", required: false)
</div>
然后在最后寫上js用于點擊跳轉，上面的@RenderSection("scripts", required: false)和下面的#demoAdmin都在另一個頁面中，也就是放iframe的頁面
<script>
//JavaScript代碼區域
layui.use('element', function () {
var $ = layui.jquery
, element = layui.element;
});
$(".Card").click(function () {
$("#demoAdmin").attr("src", "/Admin/CardManagement")
});
$(".Project").click(function () {
$("#demoAdmin").attr("src", "/Admin/ProjectManagement")
});
$(".Funds").click(function () {
$("#demoAdmin").attr("src", "/Admin/FundsManagement")
});
</script>
新建HomeController,新建Index頁面
@{
Layout = null;
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<iframe src="/Admin/CardManagement" frameborder="0" id="demoAdmin" ></iframe>
@section scripts{
<script>
reHeight();
$(window).resize(function () {
reHeight();
});
//設置iframe高度
function reHeight() {
var bodyHeight = $(window).height();
bodyHeight = bodyHeight - 107;
if (bodyHeight<400) {
bodyHeight = 400;
}
$("#demoAdmin").height(bodyHeight);
}
</script>
引用一下上面的layout。
其他頁面引用Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";
我把css和js引用都放在了另一個layout里，所以我需要引用一下，否則頁面會亂。
以上這篇layui點擊左側導航欄,實現不刷新整個頁面,只刷新局部的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
