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

图片说明

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

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

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

演示图片：

图片说明

图片说明