weixin_44353507
机智的爆爆哥
采纳率27.3%
2020-04-01 17:20

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

图片说明

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

  • weixin_44741397 GJ_HQQ 1年前

    你的意思是说点击左侧按钮,右侧可以显示不同的内容吗???
    你用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

    演示图片:

    图片说明

    图片说明

    点赞 2 评论 复制链接分享