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

图片说明

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

2个回答

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="

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问