<!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. 1355: [Baltic2009]Radio Transmission

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 958  Solved: 659[Submit][Status][Discuss] Description ...

  2. WebSocket handshake: Unexpected response code: 404

    在执行    http://www.cnblogs.com/best/p/5695570.html  提供的 websocket时候, 报错了 “WebSocket handshake: Unexpe ...

  3. 走进ReactiveCocoa的世界

    在学习ReactiveCocoa之前,先学习一下概念 ReactiveCocoa 是一套开源的基于Cocoa的FRP框架 .FRP的全称是Functional Reactive Programming ...

  4. fill,fill-n,memset的区别

    这里在网上搜集归纳了一个总结 memset函数 按照字节填充某字符 在头文件<string.h>中 因为memset函数按照字节填充,所以一般memset只能用来填充char型数组,(因为 ...

  5. TF.LSTM实现

    感悟:耗时最多的就是数据格式整理,其本身并不复杂 NN-LSTM-NN-SOFTMAX 数据格式:batch_size =>批大小,n_steps=>要建立多少lstm 0.原始输入数据格 ...

  6. 设置多行文本框不能拓展大小和span标签边框设置

    resize: none;/*设置多行文本框,不能拓展大小*/ #span { display: block; border: 1px solid RGB(169,169,169); /* span标 ...

  7. TCP服务器如何区分不同的用户

    CS架构:使用SOCKET(一般是一个整数),当服务器侦听到连接请求的时候,accept会返回一个SOCKET(用于识别不同的连接,可以理解成,SOCKET是区分不同连接的ID).当服务器listen ...

  8. ARM官方《CMSIS-RTOS教程》之线程Threads

    创建线程Creating Threads 一旦RTOS开始运行,就会有很多系统调用来管理和控制活跃的线程.默认情况下,main()函数自动被创建为第一个可运行的线程.在第一个例子里我们使用main() ...

  9. 11 hbase源码系列(十一)Put、Delete在服务端是如何处理

    hbase源码系列(十一)Put.Delete在服务端是如何处理?    在讲完之后HFile和HLog之后,今天我想分享是Put在Region Server经历些了什么?相信前面看了<HTab ...

  10. MapReduce JOB 的输出与输出笔记。

    提高 MapReduce 价值,自定义输入和输出. 比如跳过存储到 HDFS 中这个耗时的布置. 而只是从原始数据源接受数据,或者直接将数据发送给某些处理程序. 这些处理程序在 MapReduce 作 ...