页面导航实现页面局部内容改变
2011-08-14 16:31
597 查看
今天看到的最郁闷我的事情,很简单的事情,自己本应该懂得,但是却真真切切的被自己弄复杂了。
第一种,一般要实现页面导航改变当前页面局部内容的修改,我们是通过frame 或者Iframe来连接外部页面,然后造成当前页面局部内容的修改,但是这种情况下很明显当前页面的地址栏不会发生任何改变,用户还是会以为我停留在当前页面。
第二种,是当前页面已经写好的几个div,用来互相替换,当然是每个div对应导航栏的一个菜单选项,然后通过js来实现点击相应的导航来切换到对应的div,当然点击的时候要做两件事,第一是改变点击之前的显示的导航菜单和与之对应的div的CSS样式,然后是改变点击之后需要显示的导航菜单和与之对应的div的css样式。如此而已,至于div的数据当然是点击导航的时候通过异步ajax来获取写入div。这个页面的地址栏也是没有任何改变的。
第三种,是我懵了的这一种,其实是做了对应导航的几个页面,导航的链接自然是对应自己的页面,页面内部每个body对应的id需要与之导航对应,这样无需写js,就可以实现我们讨论的功能,其实只是视觉上欺骗了我们,不过地址栏是有变化的哦,再想想因为需要重新加载新的页面也就要渲染新的样式。应该也就是这样了!
所以自己傻了,做后台的这点猫腻都没看出来。不过还是欣赏 喜欢 前台 牛人。
第一种,一般要实现页面导航改变当前页面局部内容的修改,我们是通过frame 或者Iframe来连接外部页面,然后造成当前页面局部内容的修改,但是这种情况下很明显当前页面的地址栏不会发生任何改变,用户还是会以为我停留在当前页面。
第二种,是当前页面已经写好的几个div,用来互相替换,当然是每个div对应导航栏的一个菜单选项,然后通过js来实现点击相应的导航来切换到对应的div,当然点击的时候要做两件事,第一是改变点击之前的显示的导航菜单和与之对应的div的CSS样式,然后是改变点击之后需要显示的导航菜单和与之对应的div的css样式。如此而已,至于div的数据当然是点击导航的时候通过异步ajax来获取写入div。这个页面的地址栏也是没有任何改变的。
第三种,是我懵了的这一种,其实是做了对应导航的几个页面,导航的链接自然是对应自己的页面,页面内部每个body对应的id需要与之导航对应,这样无需写js,就可以实现我们讨论的功能,其实只是视觉上欺骗了我们,不过地址栏是有变化的哦,再想想因为需要重新加载新的页面也就要渲染新的样式。应该也就是这样了!
所以自己傻了,做后台的这点猫腻都没看出来。不过还是欣赏 喜欢 前台 牛人。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/899229cfab2c02d614490485cabb781b.gif)
相关文章推荐
- frame的简单应用(效果:通过连接改变局部区域的内容(调用的页面))
- HTML页面左侧菜单栏切换实现右侧主体内容改变
- bdnq培训(一)3.25上课内容整理--ajax请求实现页面局部刷新
- JSP页面中JQ实现---当点击按钮的时候,改变原来样式,内容也发生改变,再次点击变成原来的样子
- 切换导航标签实现当前标签颜色改变以及利用js如何准确获取当前页面url网址信息
- 页面头部和左侧固定并撑满,只有右侧部分内容改变的布局实现
- JavaScript 实现点击链接,多个页面内容同时改变的效果
- 网页设计,本页面内左侧菜单导航右侧显示内容简单实现方法
- 使用ajax实现无刷新改变页面内容和地址栏URL
- 实现页面局部内容滚动
- 实现页面局部刷新、部分代码改变
- Ajax初步实现页面局部内容更替
- js 实现用window.print()打印页面中的部分内容,局部打印
- jquery实现html页面的导航的标签内容切换
- 实现Web页面内容动态改变的dhtml操作
- 【111】Vue.js实现页面共用头部悬浮、共用底部跟随内容改变位置的例子。
- 使用ajax实现无刷新改变页面内容和地址栏URL
- 实现Web页面内容动态改变的dhtml操作
- 实现Web页面内容动态改变的dhtml操作http://www.knowsky.com/4074.html
- 实现同一页面点击导航下边内容直接替换