实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可)原理:ajax的局部刷新原理:通过.load()重新加载页面中的某一部分,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,因为地址有变,所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。遇到ajax局部刷新的需求也有很多,有时候比较简单,当内容较少,适合做成选项卡,如果网页的左侧有一个列表,点击列表使右侧的内容进行切换,如果右侧的内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了,在项目中经常使用到流程管理后台,便是左右结构布局,这个时候,简单的demo示例如下

ajax局部刷新

  • 用户中心
  • 账户信息
  • 交易记录
  • 消息中心

创建右侧对应的几个新的html页面user_center.html,user_account.html,user_trade.html,user_info.htmluser_center.html

用户中心

用户中心

用户中心

user_account.html

账户信息

账户信息

账户信息

user_trade.html

交易中心

交易中心

交易中心

user_info.html

消息中心

消息中心

消息中心

注:原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe190后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。公众号回复“1”,拉你进程序员技术讨论群.

推荐阅读

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。