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

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

图片说明

我学后端的 内容样式是找来的
用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

    演示图片：

    图片说明

    图片说明

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

报告相同问题？

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化