如何从不同的HTML文件中调用FOOTER和NavBar？
我正在创建一个简单的网页，其中我希望所有静态部件（如我的网页的NavBar和Footer）都位于单独的HTML文件中。
因此，每当我创建一个新页面时，我只需要调用它或链接它，以减少我的代码行和加载时间。我怎么能在这里做？请帮帮我。
我想做这样的事情：
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HACMS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/Site.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-navbar.css">
<link rel="stylesheet" type="text/css" href="css/footer-style.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/csi.min.js"></script>
<script type="text/javascript" src="js/csi.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script> $("#includedContent").load("sampleFooter.html"); </script>
</head>
<body>
<h1>THIS IS THE BODY</h1>
<!-- THIS IS MY NAVBAR -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="css/images/SSILogo.png" alt="SMESoft Inc." /></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right navbar-user">
<li><a href="#" class="hvr-underline-from-center"><i class="fa fa-sign-in" aria-hidden="true"></i> Log Out</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<!-- THIS IS MY FOOTER -->
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-4 col-sm-4 col-xs-4">
<h3> Company Background </h3>
<p>
SMESoft Inc. (SSI) is a duly registered company in the Philippines Securities and Exchange Commission (SEC). Established in 2008 and registered in 2011, the company has developed its product line of Business Management Solutions for Small to Medium Enterprise.
Part of the company's expansion is the acquisition of authority to distribute the products and trainings of the internationally renowned RMC Project Management Inc. headquartered in Minnesota, USA. It encompasses product distribution and training conduct with RMC trademark across the country and nearby territories (subject to RMC approval).
Two years ago, SSI started extending an advocacy campaign to raise awareness of the Project Management discipline which the founder believes will benefit the people by applying the necessary skills and concepts for a better future.
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-4 ">
<h3> Keep Connected </h3>
<ul class="social">
<li> <a href="#" class="icoFacebook"> <i class=" fa fa-facebook"></i> Like Us on Facebook</a></li>
<li> <a href="#" class="icoInstagram"> <i class="fa fa-instagram"></i> Follow Us on Instagram</a> </li>
<li> <a href="#" class="icoLinkedin"> <i class="fa fa-linkedin"></i> Follow Us on LinkedIn</a></li>
<li> <a href="#" class="icoPinterest"> <i class="fa fa-pinterest"></i> Follow Us on Pinterest</a></li>
<li> <a href="#" class="icoTwitter"> <i class="fa fa-twitter"></i> Follow Us on Twitter</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-4">
<h3> Contact Information </h3>
<ul>
<li>
<span class="fa fa-home" aria-hidden="true"></span>
Unit 511-512 VGP Center,
<p> Legaspi Ayala Avenue,</p>
<p> Village Makati City </p>
</li>
<li>
<span class="fa fa-mobile" aria-hidden="true"></span>
+63 933.049.8890 (SMART)
<p> +63 906.297.0995 (GLOBE)</p>
</li>
<li>
<span class="fa fa-phone" aria-hidden="true"></span>
886-9775 | 512-5955
</li>
<li>
<span class="fa fa-envelope-o" aria-hidden="true"></span>
inquire@smesoft.com.ph
<p> marketing@smesoft.com.ph</p>
<p> sales@smesoft.com.ph</p>
<p> support@smesoft.com.ph</p>
</li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->
</div>
<!--/.footer-->
<div class="footer-bottom">
<div class="container">
<center><p>© 2016 SMESoft Inc. All Rights Reserved</p></center>
</div>
</div>
</footer>
</body>
</html>
3 个答案:
答案 0 :(得分：1)
footer.html /保存在部分文件夹
中Gawa ka ng partial na文件夹。 Doon mo i-save ang footer.html
<footer>This is a footer</footer>
JS（把它放在所需的页面上）
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200){
document.body.innerHTML += xhttp.responseText; // you can change the target. As long as you append xhttp.responseText. It will work fine.
}
};
xhttp.open('GET', 'partial/footer.html', true); // note: link the footer.html
xhttp.send();
示例：假设您已经使用index.html
只需将JS代码放入索引即可。
<body>
<script>
var xhttp = new ....
</script>
</body>
这是没有缓存的基础。如果要创建路由，则需要缓存。测试。干杯。希望能帮助到你。
答案 1 :(得分：0)
表示$("#includedContent")的部分是指页面上的ID。
所以页脚应该有id="includedContent"。那么＆＃39; load（）＆＃39;将来自sampleFooter.html的内容放入该ID。
答案 2 :(得分：-5)
您可以使用iframe Element
<iframe src="name.html"></iframe>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？