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 ...
随机推荐
- CSS之基于不同场景的垂直居中解决方案
元素的水平居中,如果是一个行内元素,就对它的父元素应用 “text-align:center”: 如果是一个块级元素,就对它自身应用“margin:auto”. 垂直居中的几种场景以及实现方法: 一. ...
- UVa 11025 The broken pedometer【枚举子集】
题意:给出一个矩阵,这个矩阵由n个数的二进制表示,p表示用p位二进制来表示的一个数 问最少用多少列就能将这n个数区分开 枚举子集,然后统计每一种子集用了多少列,维护一个最小值 b[i]==1代表的是选 ...
- caffe模型各层数据和参数可视化
先用caffe对cifar10进行训练,将训练的结果模型进行保存,得到一个caffemodel,然后从测试图片中选出一张进行测试,并进行可视化. In [1]: #加载必要的库 import nump ...
- 排序算法(Apex 语言)
/* Code function : 冒泡排序算法 冒泡排序的优点:每进行一趟排序,就会少比较一次,因为每进行一趟排序都会找出一个较大值 时间复杂度:O(n*n) 空间复杂度:1 */ List< ...
- Linux 图形文件压缩/解压缩实用程序，归档管理器。
1.ArkArk是KDE桌面环境默认的归档管理器,支持插件设置,允许你创建一个压缩包,查看压缩文件的内容,解压压缩包的内容到你所选定的目录.它能处理多种格式,包括 tar.gzip.bzip2.zip ...
- CSS display属性学习
---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...
- Firefox访问https的网站，一直提示不安全
http://mozilla.com.cn/thread-374897-1-1.html 要激活此功能步骤如下: 在地址栏键入"about:config" 点击“我了解此风险” 在 ...
- 128.C++文件操作小结
打开后缀参数 #include <fstream> #include <iostream> using namespace std; //文本读写 //文件写入 void ma ...
- android学习笔记二、Activity深入学习
一.创建和使用: 1.Activity是android的四大组件之一,需要继承Activity并在清单文件中进行声明才能使用.没有声明则报错. 2.启动Activity是通过Intent,有两种方式: ...
- 【Redis哨兵集群】
目录 开始配置主从复制 开始配置Redis Sentinel @ *** 在开始之前,我们先来看看Redis的主从复制 主从复制原理: 从服务器向主服务器发送SYNC命令. 主服务器接到SYNC命令后 ...