Effect demonstration:

①Default page (index.jsp):

②: After clicking the user list option under the user management label on the left, the content of the default page on the right is updated to the user list page (userList.jsp) Content:

③: Similarly, when you click the product list and order list under the product management and order management labels, the content on the right side will be refreshed accordingly to the product list page (productList.jsp) and order list page (recordList .jsp)

In this way, Ajax+div is used to realize the menu selection on the left and the display effect of the content on the right. Let’s take a look at the specific implementation process

1:

The sample program used for the entire demonstration contains the default page (index.jsp), user list page (userList.jsp), product list page (productList.jsp), order management page (recordList.jsp)

Using the Bootstrap framework and FontAwesome icon (no way, bootstrap comes with it There are too few icons o(╯□╰)o), please refer to the official website for how to use these two products, they are relatively simple

Let’s take a look at the code of index.jsp first, I have basically commented it in detail:

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


  
    
      <%-- 在IE运行最新的渲染模式 --%>
      <%-- 初始化移动浏览显示 --%>
    
    
    
    
      
          
    
    
    
  

  
  
    
  
    

      

        
    
          

            
            

                用户管理 (current)
            
 
            
            
            

              
 用户列表
            
            

                产品管理 (current)
            
 
            

              
 产品列表
            
            

                订单管理 (current)
            
 
            

              
 订单列表
            
          
        
      
    
      
         

          
 控制台   欢迎使用XXX后台管理系统
            
             

                
          
                  使用指南：

                  

默认页面内容……
                
                 
             
 
        
 
    
  

Attention :

If the icon of FontAwesomt is not displayed correctly, it is likely that the font file address in font-awesome.css is wrong

Please check whether the url in the red box on the right corresponds to the fonts-awesome file in the red box on the left Path

two:

userList.jsp page code:

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








  

    我是用户列表 (っ´Ι`)っ
  

productList.jsp:

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








  

    我是产品列表 ╰(￣▽￣)╭
  

recordList.jsp:

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








  

    我是订单列表 <(￣ˇ￣)/
  

These three are just simple demonstration pages, so I won’t waste more words on the above. The following is the implementation of the "left menu, right content" page effect based on Ajax+div introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles on the implementation of the "left menu, right content" page effect based on Ajax+div, please pay attention to the PHP Chinese website!