我们在日常浏览网页时经常看到各式各样的网页,会发现一般的网页,它会拥有一个导航栏,
在导航栏中我们可以进行多方面的选择或进行搜索,可以实现多页面的跳转,
但是在进行页面跳转之后,导航栏还是存在,或者隐藏到一边,
因为它们有一个主页面或属于同一个软件的网页,是不是这样呢,相信你很清楚。
在程序员的眼中,实现这样跳转的方法有很多种。
如果两个网页互不存在关系,但是他们发布的平台相同的,可以存在跳转,
或者两个页面互不干预,只存在一个链接的按钮,
那么可以用a标签或者,或者写js打开一个全新的页面就可以了。
那如果我需要的也是页面跳转,但是我也需要存在导航栏为我提供准确的页面导航跳转。
使用iframe标签进行页面嵌套
iframe元素也是属于HTML标签,它同样拥有Html标签的属性,您可以设置其样式。
如:设置宽度,高度,边框大小、颜色,背景等等样式
当然,您也可以把要嵌套的页面链接直接放到iframe元素中。
但是这一个iframe元素只能嵌套一个页面,如需要多个嵌套,需要多个iframe元素,不建议。
您也可以用一个iframe元素,通过写JS代码实现多个页面嵌套,JS可以多个点击事件实现嵌套跳转,也可以全用同一个方法实现搜哟页面嵌套跳转,但是用一个方法实现所有嵌套跳转我还不会,
所以我写的是onclick点击事件。
下面展示部分页面嵌套的代码(不是全部)。
//10,销售订单历史
$("#Salesorder").click(function () {
$("#content").attr("src", "/Huitubegoods/Salesinformation/Salesorder");
});
//11,新增销售订单
$("#IntersSalesorder").click(function () {
$("#content").attr("src", "/Huitubegoods/Salesinformation/IntersSalesorder");
});
attr表示嵌套的内容,attr里面的值用属性值表示,src 表示嵌套的路径,后面是具体的页面路径。
我所练习项目的主页面:
下面找到慧管货下面的新增销售订单,点击跳转到新增销售订单页面,但是,我的主体还没变,
导航栏还存在,只是嵌套区域进行了页面跳转。
页面嵌套跳转就是这样,相信您一定会。我们后续加油。