ajax实现简单的点击左侧菜单，右侧加载不同网页

实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）

图片.png

原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

遇到ajax局部刷新的需求也有很多，有时候比较简单，当内容较少，适合做成选项卡，如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了，在项目中经常使用到流程管理后台，便是左右结构布局，这个时候，简单的demo示例如下

    
        
        
        
        

    

    
        

            

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

        
    
    

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

user_center.html

    
        
        
    
    
        

  用户中心
  用户中心
  用户中心
  

    

user_account.html

    
        
        
    
    
        

  账户信息
  账户信息
  账户信息
 

    

user_trade.html

    
        
        
    
    
        

  交易中心
  交易中心
  交易中心

    

user_info.html

    
        
        
    
    
        

 消息中心
 消息中心
 消息中心


    

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知