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

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

图片说明

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

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

2条回答 默认 最新

  • yangxingzou
    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.')}
    );
    点赞 评论
  • qq_34313436
    略懂前端萌新 2019-02-20 12:30

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

    点赞 评论
提交

相关推荐