如何实现基于Ajax+div的“左边菜单、右边内容”页面效果-成都快上网建站

如何实现基于Ajax+div的“左边菜单、右边内容”页面效果

小编给大家分享一下如何实现基于Ajax+div的“左边菜单、右边内容”页面效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

泗阳网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司自2013年创立以来到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

效果演示:

①默认页面(index.jsp):

如何实现基于Ajax+div的“左边菜单、右边内容”页面效果

②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 :

如何实现基于Ajax+div的“左边菜单、右边内容”页面效果

③:同理,点击 产品管理、订单管理 标签下的 产品列表、订单列表 时,右侧内容会相应的刷新为产品列表页(productList.jsp)、订单列表页(recordList.jsp)的内容

这样就使用Ajax+div实现了左边菜单选择,右边内容显示的效果,下面就来看看具体的实现过程吧

一:

整个演示用的示例程序包含默认页面(index.jsp),用户列表页(userList.jsp),产品列表页(productList.jsp),订单管理页(recordList.jsp)

使用了 Bootstrap 框架和 FontAwesome 的图标(没办法,bootstrap自带的图标太少了o(╯□╰)o),这俩货的使用方法请参见官网,都比较简单

先来看看index.jsp的代码吧,我基本都详细注释了:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>


  
    
      <%-- 在IE运行最新的渲染模式 --%>
      <%-- 初始化移动浏览显示 --%>
    
    
    
    
      
          
    
    
    - 后台管理系统 -
  
  
  
    
       
        
          
            Toggle navigation
            
            
            
          
           XXXX.com
        
                                            
  •  用户列表
  •                
  •  产品列表
  •             
  •  订单列表
  •                       
           
                                                                                          用户管理 (current)                                                                    
  •  用户列表
  •                          
  •                 产品管理 (current)             
  •                              
  •  产品列表
  •                          
  •                 订单管理 (current)             
  •                              
  •  订单列表
  •                                 
          
                                     控制台   欢迎使用XXX后台管理系统                                            
                                 使用指南:
                      

    默认页面内容……                 
                                                        /*      * 对选中的标签激活active状态,对先前处于active状态但之后未被选中的标签取消active      * (实现左侧菜单中的标签点击后变色的效果)      */     $(document).ready(function () {       $('ul.nav > li').click(function (e) {         //e.preventDefault();  加上这句则导航的标签会失效         $('ul.nav > li').removeClass('active');         $(this).addClass('active');       });     });     /*      * 解决ajax返回的页面中含有javascript的办法:      * 把xmlHttp.responseText中的脚本都抽取出来,不管AJAX加载的HTML包含多少个脚本块,我们对找出来的脚本块都调用eval方法执行它即可      */     function executeScript(html)     {       var reg = /]*>([^\x00]+)$/i;       //对整段HTML片段按<\/script>拆分       var htmlBlock = html.split("<\/script>");       for (var i in htmlBlock)        {         var blocks;//匹配正则表达式的内容数组,blocks[1]就是真正的一段脚本内容,因为前面reg定义我们用了括号进行了捕获分组         if (blocks = htmlBlock[i].match(reg))          {           //清除可能存在的注释标记,对于注释结尾-->可以忽略处理,eval一样能正常工作           var code = blocks[1].replace(/