1、做一个导航栏，并设置跳转链接的<a>标签的name属性或id

此处演示name标签

    	
    
 		
     学生管理系统		
     							
     
			
      
				
       
主页					(current)				
				
       
基本信息
				
       
 系统查询 					
        
						
         基本信息 
         成绩信息						
         
						
         汇总信息					
        
				
       
修改密码
				
       
				
       				
       
				登陆
				
       
注册
				
       			
      
		
     
	
    

2、创建iframe标签，并设置具体属性

iframe各属性值参考如下链接：

3、使用jq对每个窗体的事件进行绑定

$(document).ready(function(){//设置并获取Session	localStorage.setItem("session_name", "${session_user.name}");	var name = localStorage.getItem("session_name");	// 判空	if(name == null || name == "" || name.length == 0){		// 设置成未登录状态		$("#loginSession").text("登录");		$("#register").text("注册");		$("#register").attr("name","register.jsp");		$("#register").attr("href","register.jsp");		$("#register").attr("target","_top");	}else{		// 登录成功		$("#loginSession").text(name);		$("#loginSession").attr("name","");// 取消点击事件		$("#register").text("退出");		$("#register").attr("name","LogoutServlet");	}		// 导航栏点击，下面jframe的src改变，实现页面刷新功能	$("a").click(function(){ 		var src = $(this).attr("name");		$("iframe").attr("src",src);	});});

4、对特殊的<a>标签进行处理

这里是防止退出登录后重新登录产生两个导航栏，具体情况根据个人项目自行编写

// 对退出按钮绑定事件，只要点击该按钮，就恢复成注册按钮	$("#register").click(function(){		var name = $(this).attr("name");		if(name == "LogoutServlet"){			$("#loginSession").text("登录");			$("#register").text("注册");			$("#register").attr("name","register.jsp");			$("#register").attr("href","LogoutServlet");			$("#register").attr("target","_top");		}	});

5、注意事项

iframe出现两个导航栏时，设置对应<a>标签的target值解决，如上面代码中设置target值为"_top"。若部分<a>标签不跳转则可不设置标签的name属性或id也可以让name属性为空或id为空。

若要测试这些代码，得导入bootstrap4得css和js包。