用iframe动态切换界面

用iframe动态切换界面

第一种

这里是要切换的选项，通过事件触发

<div class="col-sm-2"  style="width:110PX;padding-left:0px;">
					<div class="contact-box" onclick="personal()" >
						 <p>个人信息</p>
					</div>
				</div> 
					<div class="col-sm-2" style="width:110PX;padding-left:0px;">
						<div class="contact-box" onclick="attence()">
							 <p>考勤</p>
						</div>
					</div>

通过替换iframe中src的值达到切换界面

<div class="row" style="border: 1px solid #e7eaec; ">
				<iframe align="center" ID="iframeeducation" Name="iframeeducation" border=0 FRAMEBORDER=0 SCROLLING=AUTO
					width="100%" height="100%" SRC="myclass_Student_stu?stuid=${stuid}"></iframe>				
      </div>

切换的事件

function personal(){
		var url="myclass_Student_stu?stuid=${stuid}";
			var iframeeducation = window.frames["iframeeducation"];
			iframeeducation.location = url;
		}

第二种

a标签的跳转属性，target值写上iframe的name值就会跳转到指定的地方

<div class="col-sm-2"  style="width:110PX;padding-left:0px;">
					<a class="contact-box" src="myclass_Student_stu?stuid=${stuid}" target="iframeeducation" >
						 <p>个人信息</p>
					</a>
				</div>