之前没有接触过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样式.自己脑补。
时间： 2024-08-07 16:46:50