机智的爆爆哥 2020-04-01 17:20 采纳率: 33.3%
浏览 329
已采纳

请问这个网页怎样点击左侧按钮放置不同的内容呢

图片说明

我学后端的 内容样式是找来的
用iframe的话会变形 感觉不太好实现 前端大佬帮个忙.................jq学的不深。。
想要实现的就是点击每个按钮 切换到不同页面 是内嵌式的

中间的代码是这样的 

    <!-- Page Content -->
        <div id="page-content-wrapper">
          <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
          </button>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2" id="mycontent">

                        <h1 class="page-header text-center">欢迎来到个人中心！</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

补充：

明白了怎么操作 但出现了问题
图片说明图片说明图片说明

首先我这个模板是jq动态的 点x就会缩回去 我不知道这对iframe会不会有影响 其次 我将iframe加的位置有些不确定

   <!-- Page Content -->
        <div id="page-content-wrapper">
          <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
          </button>
            <div class="container">
                <div class="row">
                         <iframe src="" name="right" class="right"></iframe>
                </div>
            </div>
        </div>

加在了这里面 点击左侧按钮时 布局出现了错误。。。

  • 写回答

1条回答 默认 最新

  • GJ_HQQ 2020-04-01 19:54
    关注

    你的意思是说点击左侧按钮，右侧可以显示不同的内容吗？？？
    你用iframe并不会很难实现，这个也挺好用的

    首先你需要你这个图片展示的需要三个页面

    一、框架页面index.html
    二、左边列表页面left.html
    三、右边显示页面right.html

    首先是框架页面，就是包含了左边列表和右边显示内容的 < iframe>< /iframe>的框架

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding:0;margin: 0;}
        .left{
            background-color:#D9D9D9; 
            width: 15%;
            height:100vh;
            border: 0;
            float: left;
        }
        .right{
            background-color: #7f8c8d;
            width: 85%;
            height:100vh;
            border: 0;
            float: left;
        }
    </style>    
</head>
<body>
    <iframe src="" name="left" class="left"></iframe>
    <iframe src="" name="right" class="right"></iframe>
</body>
</html>

    显示效果

    图片说明

    然后是左侧的列表，需要单独写一个html然后把这个HTML的路径写到之前那个框架页面的你先要显示的iframe的src里面

    左侧列表代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding:0;margin: 0;}
    </style>
</head>
<body>
    <ul>
        <h2>个人中心</h2>
        <a href="https://www.baidu.com" target="right"><li>百度</li></a>
        <a href="https://www.douyu.com" target="right"><li>斗鱼</li></a>
        <a href="right.html" target="right"><li>我的团购</li></a>
        <a href="" target="right"><li>我的度假</li></a>
        <a href="" target="right"><li>我的攻略</li></a>
        <a href="" target="right"><li>联系我们</li></a>
    </ul>
</body>
</html>

    index.html改动的地方

    注意：这个超链接的target写的就是iframe中的name，可以跨页面使用

    图片说明

    我这里使用的就是第三方的链接来模拟一下本地的页面跳转，其实效果是一样的，只需要把href中的地址改成right.html就行了

    最后的效果就是

    图片说明

    图片说明

    图片说明

    图片说明

    不知道这样算不算具体，能不能明白，如果你是从网站上面找过来的页面的话需要仔细的读读他的代码。

    已更改回复内容：

    链接：https://pan.baidu.com/s/1U8R4pqSVNJSFNI2gl1yIfw
    提取码：xw7f

    演示图片：

    图片说明

    图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？