<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            body{background: #f2f2f2;}

            *{margin: 0;padding: 0;}

            .head{

                height: 80px;

                width: 100%;

                background: cornflowerblue;

            }

            .menuqq{

                background: red;

                width: 120px;

                position: absolute;

                top: 80px;

                bottom: 0;

                left: 0;

                right: 0px;

            }

            .container{

                position: absolute;

                top: 80px;

                right: 0;

                bottom: 0;

                left: 120px;

                background: lightgrey;

                overflow: auto;

            }

            .menu{

                height: 800px;

                width: 200px;

                margin: 0 auto;

                background: blue;

            }

            .menu1{background: red;}

            .menu2{background: blue;}

            .menu3{background: yellow;}

            .menu4{background: orange;}

        </style>

        <script src="js/jquery.js"></script>

    </head>

    <body>

        <div class="head"></div>

        <div class="menuqq">

            <a class="1">按钮1</a>

            <br />

            <a class="2">按钮2</a>

            <br />

            <a class="3">按钮3</a>

            <br />

            <a class="4">按钮4</a>

        </div>

        <div class="container">

            <!--这里就是放置内容的地方，点击左侧实现内容区切换页面-->

        </div>

    <script>

    $(function(){

        $('a').on('click',function(){

            var num = $(this).attr('class');

            $('.container').load('menu' + num + '.html');

        });

    });

    </script>

    </body>

</html>

nume1.html:个人觉得ajax加载的内容不用写<html>这部分了，毕竟能少加载一些就少加载一些嘛

<div class="menu menu1">

</div>

ajax模仿iframe的更多相关文章

  1. ajax和iframe区别

    ajax和iframe https://segmentfault.com/a/1190000011967786 ajax和iframe的区别 1.都是局部刷新 2.iframe是同步的,而ajax是异 ...

  2. 使用ajax与iframe嵌套实现页面局部刷新

    使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.​1. [代码]javascript代码 function cj_start(depname,gr ...

  3. 使用ajax代替iframe

    相信大多数程序员都跟iframe打过交道,iframe简单,好用.在我用的过程中比较苦逼的是关于iframe高度的设置. 由于子页面内容不确定,页面高度也不确定.于是开始网上的各种搜索,一般有两种:一 ...

  4. javascript 不用ajax 用 iframe 子域名下做到ajax post数据

    最近在一个项目中遇到了ajax跨域的问题,情况如下.有三个域名分别是 a.xx.com b.xx.com c.xx.com 这三个域名都会用用ajax post方式相互读取数据.文笔不好, 不写了妈蛋 ...

  5. 上传文件的三种方式xhr,ajax和iframe及上传预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 使用jquery ajax代替iframe

    大家在实际编写网页时可能会遇到网页中需要嵌套网页的情况,这时候通常想法就是通过iframe标签. 但实际用过的人都知道其有种种的不方便,比较直观的问题就是iframe的自适应高度,这也是处理起来比较麻 ...

  7. 无刷新上传图片，ajax 和 iframe

    iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  8. ajax模仿form上传图片

    <form id="iconForm"> <input class="js_upFile cover1" type="file&qu ...

  9. 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

随机推荐

  1. PDO 拿出來的 Float 數據跟数据库中的数据不匹配

    数据库中的价格字段是 float 类型的,在 Laravel 中取出会出现这样的情况 数据库:71.9 -> 程序打印:72.0 数据库:75.2 -> 程序打印:75.3 在另外一个测试 ...

  2. 前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程

    由于一个项目中需要用到用户头像上传裁剪组件,这两天便网上找了一些相关插件,主要由以下几种插件: 1.Image Cropper:http://elemefe.github.io/image-cropp ...

  3. PostgreSQL服务器存储参数的内部查看方法和实际表述之间的关系

    postgres=# show wal_buffers ; wal_buffers ------------- 4MB(1 row) postgres=# show port; port ------ ...

  4. file_get_contents 无法采集 https 网站

    <?php echo file_get_contents("https://www.baidu.com"); ?> 运行以上代码会报以下错误: 再运行一次去看看!

  5. [BZOJ1935][SHOI2007]Tree 园丁的烦恼（离线+树状数组）

    题意 给出第一象限的n个点,有m次询问,每次询问一个矩形中的点的个数.(0<=n,m<=500000,0<=xi,yi<=10000000) 题解 一眼望去不可做. 用二位前缀 ...

  6. Unity 获得视频的某一帧，生成缩略图

    Unity 并无直接获取视频某一帧图像的API,所以想要生成缩略图就要自己写方法了, 图片和视频都可以用这种方式生成缩略图,另,转载请标明出处,谢谢. using System.Collections ...

  7. GenIcam标准（六）

    2．9．可用的接口 本章用伪代码列出在2.3章介绍过的最重要的接口.对每个接口,实际的实现可以提供更多的方法,例如,除了SetValue(value)方法,还可以用直接映射到SetValue()的方式 ...

  8. storm 消息确认机制及可靠性

    worker进程死掉 在一个节点 kill work进程 比方 kill 2509  对work没有影响 由于会在其它节点又一次启动进程运行topology任务 supervisor进程死掉 supe ...

  9. AES加密解密在JAVA和ANDROID下互通

    <span style="font-family: Arial, Helvetica, sans-serif;">昨天外包安卓的那个人说AES的加解密结果不一样.于是百 ...

  10. iOS 7 UI 过渡指南 - 支持续 iOS 6（iOS 7 UI Transition Guide - Supporting iOS 6）

    iOS 7 UI Transition Guide Preparing for Transition Before You Start Scoping the Project Supporting i ...