ajax模仿iframe
<!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的更多相关文章
- ajax和iframe区别
ajax和iframe https://segmentfault.com/a/1190000011967786 ajax和iframe的区别 1.都是局部刷新 2.iframe是同步的,而ajax是异 ...
- 使用ajax与iframe嵌套实现页面局部刷新
使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.1. [代码]javascript代码 function cj_start(depname,gr ...
- 使用ajax代替iframe
相信大多数程序员都跟iframe打过交道,iframe简单,好用.在我用的过程中比较苦逼的是关于iframe高度的设置. 由于子页面内容不确定,页面高度也不确定.于是开始网上的各种搜索,一般有两种:一 ...
- javascript 不用ajax 用 iframe 子域名下做到ajax post数据
最近在一个项目中遇到了ajax跨域的问题,情况如下.有三个域名分别是 a.xx.com b.xx.com c.xx.com 这三个域名都会用用ajax post方式相互读取数据.文笔不好, 不写了妈蛋 ...
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用jquery ajax代替iframe
大家在实际编写网页时可能会遇到网页中需要嵌套网页的情况,这时候通常想法就是通过iframe标签. 但实际用过的人都知道其有种种的不方便,比较直观的问题就是iframe的自适应高度,这也是处理起来比较麻 ...
- 无刷新上传图片，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 ...
- ajax模仿form上传图片
<form id="iconForm"> <input class="js_upFile cover1" type="file&qu ...
- 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
随机推荐
- 提高realm存储速率
我的数据量大约有2.5M,但是完全存储到数据库差不多用了11秒,有没有比较好的方法提高存储效率 提高realm存储速率 >> android这个答案描述的挺清楚的:http://www.g ...
- UVa 216 Getting in Line【枚举排列】
题意:给出n个点的坐标,(2<=n<=8),现在要使得这n个点连通,问最小的距离的和 因为n很小,所以可以直接枚举这n个数的排列,算每一个排列的距离的和, 保留下距离和最小的那个排列就可以 ...
- GoldenGate 应用系统升级
(仅复制DML时)源端和目标端数据库增减复制表 增加复制表 在GoldenGate的进程参数中,如果通过*来匹配所有表,因此只要符合*所匹配的条件,那么只要在源端建立了表之后GoldenGate就能自 ...
- GoldenGate 1403错误解决方法
OGG oracle goldengate 1403错误解决方法 1. 错误描述WARNING OGG-01154 Oracle GoldenGate Delivery for Oracle, re ...
- <<大学>>原文
大学之道,在明明德,在亲民,在止于至善.知止而后有定,定而后能静,静而后能安,安而后能虑,虑而后能得.物有本末,事有终始,知所先后,则近道矣. 古之欲明明德于天下者,先治其国,欲治其国者,先齐其家:欲 ...
- AlexNet （ImageNet模型）
介绍 AlexNet是LeNet的一种更深更宽的版本.首次在CNN中应用ReLU.Dropout和LRN,GPU进行运算加速. 一共有13层,有8个需要训练参数的层(不包括池化层和LRN层),前5层是 ...
- NodeJS学习笔记 (17)集群-cluster(ok)
cluster模块概览 node实例是单线程作业的.在服务端编程中,通常会创建多个node实例来处理客户端的请求,以此提升系统的吞吐率.对这样多个node实例,我们称之为cluster(集群). 借助 ...
- BZOJ 2724 [Violet 6]蒲公英(分块）
题意 在线区间众数 思路 预处理出 f[i][j] 即从第 i 块到第 j 块的答案.对于每个询问,中间的整块直接用预处理出的,两端的 sqrtn 级别的数暴力做,用二分查找它们出现的次数.每次询问的 ...
- 百度IOT
万物互联 http://www.jianshu.com/p/3d9846bf42bd 百度天工
- django-xadmin使用之配置页眉页脚
环境:xadmin-for-python3 python3.5.2 django1.9.12 在模块的adminx.py文件中增加以下代码即可: # TIP 定义页头页脚 class GlobalSe ...