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 ...
随机推荐
- python3.x 学习笔记1(基础知识)
1.python模块: 标准库和第三方库,第三方库需要下载安装 2.模块sys: 命令 功能 sys.stdin 标准输入流sys.stdout 标准输出流sys.stderr ...
- OpenGL编程逐步深入（八）伸缩变换
准备知识 伸缩变换非常简单,它的目的是增大或者缩小对象的尺寸.例如:你可能希望用同一个模型创建不同大小的对象(例如形状相同,但大小不同的树木)或者你想改变对象的大小使它和游戏场景匹配.这些例子中你可能 ...
- python制造模块
制造模块: 方法一: 1.mkdir /xxcd /xx 2.文件包含: 模块名.py setup.py setup.py内容如下:#!/usr/bin/env pythonfrom distutil ...
- 隐私：随机选择 MAC 地址
隐私:随机选择 MAC 地址 从 Android 8.0 开始,Android 设备在未连接到网络的情况下探测新网络时会使用随机 MAC 地址. 在 Android 9 中,您可以启用开发者选项(默认 ...
- Unix版权史
原文出处: 阮一峰 这几天,我在读<Unix编程艺术>. 书中介绍了Unix的发展历史.我发现,这是一个很好的例子,说明现行版权制度具有阻碍社会发展的负面作用. 2. Unix诞生于 ...
- bzoj1230 开关灯 线段树
好久没写线段树了..被一道线段树裸题卡了一个上午 对区间进行异或,查询的时候直接用区间长度减去原有是数量就是改变完的数量 #include<bits/stdc++.h> using nam ...
- tload---显示系统负载
tload命令以图形化的方式输出当前系统的平均负载到指定的终端.假设不给予终端机编号,则会在执行tload指令的终端机显示负载情形. 语法 tload(选项)(参数) 选项 -s:指定闲时的刻度: - ...
- Mysql忘记rootpassword
1,停止MYSQL服务,CMD打开DOS窗体.输入 net stop mysql 2,在CMD命令行窗体,进入MYSQL安装文件夹 比方E:\Program Files\MySQL\MySQL Ser ...
- Ubuntu14.04下安装和"激活"Office2010ProPlus与Visio2010(15.11.20Updated)
本人用Ubuntu的时候全然没有打游戏的欲望,故而能够更高效的工作. 尽管说LibreOffice.WPS等等有Ubuntu版本号,可是用着还是没有微软的Office顺手,故而折腾了一下怎样安装Off ...
- Draw the RGB data from kinect C++ via opengl
In order to improve my English writing skills,I am going to write the blogs in English form now! -- ...