按钮/链接刷新iframe

方法一：
链接形式为导航栏

<!--左侧导航栏-->
<div class="main_left">
	<nav class="nav flex-column navbar-dark bg-dark text-center font-weight-bolder" aria-orientation="vertical">
		<li><a class="nav-link" href="name.html" target="menuFrame" href="name.html">Name</a></li>
		<li><a class="nav-link" href="education.html" target="menuFrame">Education</a></li>
	</nav>
</div>

下面的代码放在另一个div里面

<!--右侧主页-->
<div>
	<iframe id="menuFrame" name="menuFrame" src="name.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="80%" height="100%; float:right"></iframe>
</div>	

script放在中，头尾都可以

("li").on('click', function() {
	 var href = $(this).find("a").attr('href');
	 $('#mainContents').empty();
	 $('#mainContents').load("../new/" + href);
	 //阻止跳转
	 $(this).parents('li').addClass('active').siblings('li').removeClass('active');
	 return false;
});

方法二：
按钮形式的导航栏，有点击效果比较好看

<div class="main_left">
	<div class="nav btn-group-vertical">
		<button type="button" class="btn btn-secondary" target="menuFrame" onclick="demo(this)" custom="name.html">Name</button>
		<button type="button" class="btn btn-secondary" target="menuFrame" onclick="demo(this)" custom="education.html">Education</button>
	</div>
</div>

iframe和上面的一样

<!--右侧主页-->
<!--src里面为初始要在右侧显示的页面-->
<div>
	<iframe id="menuFrame" name="menuFrame" src="name.html" style="overflow:visible;" scrolling="yes" frameborder="no" width="80%" height="100%; float:right"></iframe>
</div>	

这里的script一定要放在里面

demo = function(e){
	//得到iframe里自定义的属性custom
	var address =$(e).attr("custom");
	console.log(address);		//输出在控制台
	$("iframe").attr("src",address);	//更改属性src的值-->
}