注意:js无法操作动态生成的网页元素;
解决方法 1.使用事件委托给他们的父元素
2.在load()的回调函数中操作;如:
$('#header').load('5_header.php',function(){
//在回调函数中操作动态加载的头部中的html元素
});
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.nav {
list-style:none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
}
.copyright {
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<img src="img/loading.gif">
</div>
<div id="main">
<h3>这是首页</h3>
<p>lorem*3</p>
</div>
<div id="footer">
<img src="img/loading.gif">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//待页面加载完后,异步请求页头和页尾
//$(document).ready(fn);
$(function(){ //页面加载完成要执行的函数
$('#header').load('5_header.php',function(){
//在回调函数中操作动态加载的头部中的html元素
});
$('#footer').load('6_footer.php');
});
</script>
</body>
</html>
header.php
<?php
header('Content-Type: text/html;charset=UTF-8');
?>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
</ul>
footer.php
<?php
header('Content-Type: text/html;charset=UTF-8');
?>
<hr>
<p class="copyright">版权所有® 2016 TARENA.COM</p>