<!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. Ionic CLI升级到3版本后2版本工程运行出错.md

    1. 问题描述: 最近将Ionic的CLI升级到了最新的版本3.2,升级后在原来Ionic2版本的CLI中创建的工程,通过ionic serve运行报错,错误类似如下: C:\Users\Admin\ ...

  2. 请问这个git上开源的node项目怎样才能在windows用Npm跑起来

    这个项目https://github.com/wechaty/we...以前都是用人家弄好的手脚架搞得es6,搞了2天搞起了es6还报错,错误信息在下面,然后我想请教大神:1我到底应该怎么弄才能在wi ...

  3. PostgreSQL Replication之第九章 与pgpool一起工作（1）

    在前面的章节中,我们已经能够深入地理解了pgbouncer,同时也学会了如何使用它来尽可能地优化复制设置.在本章我们将了解一个经常被称作与pgbouncer相对应的工具.尽管pgpool的思想与pgb ...

  4. python实现决策树C4.5算法(在ID3基础上改进)

    一.概论 C4.5主要是在ID3的基础上改进,ID3选择(属性)树节点是选择信息增益值最大的属性作为节点.而C4.5引入了新概念"信息增益率",C4.5是选择信息增益率最大的属性作 ...

  5. webpack简短版零工程构建项目（二）

    webpack使用总结 1.初始化一个项目 npm init -y 之后会生成一个package.json配置文件. 2.安装webpack,vue,vue-loader npm install we ...

  6. Linux Shell脚本编程-基础2

    命令退出状态码  bash每个命令,执行状态都有返回值 0表示成功 非0表示失败(1-255) $?特殊变量可以打印出上一条命令的状态返回值 脚本的状态返回值是脚本执行的最后一条命令 自定义脚本状态返 ...

  7. Unity 调用 Android Native 方法(一) 获得Android系统音量

    学习雷锋,好榜样,接下来的这一系类教程里,将通过unity来实现Android端的一些常用功能, 不需要在 Asset/Plugins/Android 目录下引用jar包或者aar包,这是重点. us ...

  8. linux学习之高并发服务器篇（二）

    高并发服务器 1.线程池并发服务器 两种模型: 预先创建阻塞于accept多线程,使用互斥锁上锁保护accept(减少了每次创建线程的开销) 预先创建多线程,由主线程调用accept 线程池 3.多路 ...

  9. 【Henu ACM Round#19 B】 Luxurious Houses

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从右往左维护最大值. 看到比最大值小(或等于)的话.就递增到比最大值大1就好. [代码] #include <bits/std ...

  10. Java基础学习总结（16）——Java制作证书的工具keytool用法总结

    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...