最近在写自己的项目,这里将自己遇到的问题记录一下,首先是页面,用的是html纯净态页面,分为header、body、footer等,使用的是Jquery的load函数。
<div class="header"></div>
<script>
$(".header").load("header.html");
</script>
<div class="footer"></div>
<script>
$(".footer").load("footer.html");
</script>
header页面内容
<meta charset="UTF-8">
<div class="header">
<div class="black">
<div class="black-main">
<h1>
<div>
</div>
</h1>
<ul class="customer">
<li>
<i aria-hidden="true">
<a href="localhost:8081/Personal.html" class="person_a">
<img class="customer_logo" src="img\person_mini.png">
</a>
</i>
</li>
<li>
<i aria-hidden="true">
</i>
<div id="count">
<a>
<img class="customer_logo" src="img\car.png">
<span style="color: white;" id="totalNum">
</span>
</a>
</div>
</li>
</ul>
<!-- 搜索框 -->
<input class="input-search" placeholder="请输入商品信息" />
</div>
</div>
<div class="white">
<div class="white-main">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">闲置书籍</a>
</li>
<li>
<a href="#">服装鞋饰</a>
</li>
<li>
<a href="#">数码电子</a>
</li>
<li>
<a href="#">日用物品</a>
</li>
<li>
<a href="#">出行交通</a>
</li>
<li>
<a href="#">其他闲置</a>
</li>
</ul>
</div>
</div>
</div>
这里说一下踩的坑。
第一个:确保你引用了JQuery框架。
第二个:header页面要有
<meta charset="UTF-8">
这个能确保拟引入到主页面后,header页面不会乱码。
第三个:可以看到,header页面是纯代码,相当于一个div块,他不是一个完整的页面。完整的页面会报错,因为一个页面只能有一个body。
2020.2.5
新增一个遇到的坑
第四个:记得写一个通用跳转页面的page,不然你会发现,匹配路径跳转有可能会不显示头和尾。