html头部底部如何加载
我们可以尝试iframe无边框 (但是这种方法很笨 并不建议)
<iframe style="min-width:1200px" hspeace= "0" vspace= "0" runat="server" src="foot.html" width="100%" height="90" frameborder="no" border="0"marginwidth="0" marginheight="0" scrolling="no"allowtransparency="yes"></iframe>
对前端来说最好的方法就是使用jQuery的load函数
/*导入头部和尾部*/
$(document).ready(function(){
$(".footer").load("page/footer.html");
});
但是注意,此时的footer.html不需要是完整的HTML,这包含标签内容即可
<!--footer.html页面-->
<footer>
<ul class="g-flex">
<li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
</ul>
</footer>
如果子页面绑定了Click事件 可能load加载之后会失效 那我们需要这样写
$(".closeBar").on("click",function(){
alert("*****");
$("#PublicConfigLogoNavTreeOne").css({ "left": "-100%"});
});
或者load的时候 绑定 加载页面最外面的DIV
$(document).ready(function(){
$("#PublicConfigLogoNavTreeOne").load("leftnav.html #DIV");
});