耶律妙月
2019-02-20 11:56
采纳率: 100%
浏览 2.9k

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

图片说明

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • zoyation 2019-02-20 12:22
    已采纳

    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.')}
    );
    已采纳该答案
    打赏 评论
  • 略懂前端萌新 2019-02-20 12:30

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

    打赏 评论

相关推荐 更多相似问题