标签：
之前没有接触过iframe的相关功能,最近看到项目中基本上都是用iframe嵌套子页面,于是自己想编写实现这个过程,为以后的工作提供便利.
main页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<header id="top">
<ul>
<li id="foot1">首页</li>
<li id="foot2">子页面1</li>
<li id="foot3">子页面2</li>
<li id="foot4">子页面3</li>
</ul>
</header>
<section id="main">
<iframe frameborder="0" src="01.html"></iframe>
</section>
<footer id="foot">©mumu</footer>
<script src="js/jsss.js">
</script>
</body>
</html>
js中的代码:
$(function(){
$("#foot2").click(function(){
console.log("safd");
$("iframe").attr("src","02.html");
});
$("#foot3").click(function(){
console.log("safd");
$("iframe").attr("src","03.html");
});
$("#foot4").click(function(){
console.log("safd");
$("iframe").attr("src","04.html");
});
$("#foot1").click(function(){
console.log("safd");
$("iframe").attr("src","01.html");
})
});
子页面1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面111111111111111111111111111111111111111
</body>
</html>
子页面2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面222222222222222222222222222222222222222
</body>
</html>
子页面3:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面33333333333333333333333333333
</body>
</html>
子页面4:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面444444444444444444444444444444444
</body>
</html>
以上没有布上css样式.自己脑补。
标签：
原文地址：http://www.cnblogs.com/fishMu/p/5521085.html
