嵌套与跳转

       做项目的时候，要写很多个页面才能完成整个项目要实现的功能。这时候就要用到页面嵌套，就是把子页面嵌套到主页面里，这种方法的使用一点都不难，下面就讲讲怎么实现。

       因为是在主页面嵌套，所以就在主页面代码中加一个div,在里面写一个iframe标签，获取相应的id和设置好要嵌套的页面路径。

 

<div class="container-fluid p-0">

                <!-- =======================content 显示需要加载的页面===================-->

                <iframe id="content" src="/Main/ShowNotice"></iframe>

                <!-- =======================content 显示需要加载的页面===================-->

</div>

 

       接下来就是写点击事件，这个路径要和iframe标签中的路径一致。

 

//首页 

            $("#ShowNotice").click(function () {

                $("#content").attr("src", "/Main/ShowNotice");

            });

 

       看一下实现的效果，首页就这样完美的嵌套进来了。

       然而并不是所有的页面都适合用页面嵌套的办法的，那么问题来了，在什么情况下才不适合页面嵌套呢？一般人都能想到，就是当页面模块太大的时候，就应该用到页面跳转的方法。既不影响美观，又能给人一种很好的用户体验。实现的代码如下：

 

//考试管理-->成绩统计与分析

$("#AchievementStaAndAnalysis").click(function () {

window.location.href = "/ExaminationManagement/AchievementStaAndAnalysis

/AchievementStaAndAnalysis";

});

 

        这个与页面嵌套的道理是一样的，唯一不同的是设置跳转的路径，要跳转到哪个页面就写哪个页面的路径。