如何在网页中点击一个菜单后在本页面中一片区域显示对应页面？

如图，需要点击左侧菜单后在灰色区域显示对应的页面，我想的是每一个菜单的超链接触发js函数，函数里改变右侧iframe的src，不知实际中常用的做法是什么，望指教！
（本人大四，是做java后端的，前端了解的比较少）

1.如果中间就展示一个页面，就是你说的这种，替换iframe的src，如果多个页面就是增加选项卡，里面内容加载iframe
document.getElementById("main").src=localhost:8080/test.jsp;
2.如果中间就展示一个页面，中间一个div
js获取通过后端请求页面内容，替换div的内容，如果多个页面就是增加选项卡，js获取后端页面内容，加载div的内容

比如结合jquery等前端框架
1.动态替换div：
$.ajax({
    url:"localhost:8080/test.jsp",
    data:{ids:ids},
    type:"POST",
    dataType:"TEXT",
    success:function(data)
    {
 
     //var data="

";
 
     $("#centerDiv").html(data);
//或者直接加载：
document.getElementById("centerDiv").innerHTML=data;
    }
   })；
还可以这样用jquery的load：
jQuery('#centerDiv').load('/test/index.html',
function(){alert('Content Successfully Loaded.')}
);

如果并不是实际项目最简单最傻的方法就是把全部需要的iframe直接放到右侧，先把不需要的先隐藏 display:none
点击左侧菜单的时候切换就可以