之前沒有接觸過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樣式.自己腦補。