layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

 1 <div class="layui-side layui-bg-black">
 2    <div class="layui-side-scroll">
 3      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
 4      <ul class="layui-nav layui-nav-tree" lay-filter="test">
 5  
 6        <li class="layui-nav-item layui-nav-itemed Card">
 7          <a class="" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >名片审核</a>
 8        </li>
 9  
10        <li class="layui-nav-item Project">
11          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >项目审核</a>
12        </li>
13  
14        <li class="layui-nav-item Funds"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >需求审核</a></li>
15      </ul>
16    </div>
17 </div>
18 <div class="layui-body">
19   @RenderBody()
20   @RenderSection("scripts", required: false)
21 </div>

 1  <script>
 2     //JavaScript代码区域
 3     layui.use('element', function () {
 4       var $ = layui.jquery
 5         , element = layui.element;     
 6     });
 7     $(".Card").click(function () {
 8       $("#demoAdmin").attr("src", "/Admin/CardManagement")
 9     });
10     $(".Project").click(function () {
11       $("#demoAdmin").attr("src", "/Admin/ProjectManagement")
12     });
13     $(".Funds").click(function () {
14       $("#demoAdmin").attr("src", "/Admin/FundsManagement")
15     });
16   </script>

 1 @{
 2   Layout = null;
 3   Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
 4 }
 5  
 6 <iframe src="/Admin/CardManagement" frameborder="0" id="demoAdmin" style=" 100%; height: 100%;"></iframe>
 7  
 8  
 9 @section scripts{
10   <script>
11   reHeight();
12   $(window).resize(function () {
13     reHeight();
14   });
15   //设置iframe高度
16   function reHeight() {
17   var bodyHeight = $(window).height();
18   bodyHeight = bodyHeight - 107;
19   if (bodyHeight<400) {
20     bodyHeight = 400;
21   }
22   $("#demoAdmin").height(bodyHeight);
23   }
24   </script>