个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在创建一个简单的网页，其中我希望我的网页的所有静态部分(如 NavBar 和页脚)位于一个单独的 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>
最佳答案
footer.html/保存在部分文件夹中
Gawa ka ng 部分 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>
这是没有缓存的基础。如果你想创建路由，你将需要缓存。经过测试。干杯。希望能帮助到你。
关于html - 如何从不同的 HTML 文件中调用 FOOTER 和 NavBar？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39243809/
26
4
0
鉴于下面的基本 HTML 结构(我无法更改)，我知道我可以使用此 CSS 扩展主要内容 div: html, body { height: 100%; } body { display: fl
这应该类似于 iOS tableview 页脚，也可以在各种网站中看到(粘性页脚)。 我想实现以下目标: A 是具有可变行数的 RecyclerView。 当 A 小于屏幕(或父级)尺寸时，B(页脚)
我有一个 Bootstrap 面板，底部有两个按钮: {{ Form::open( array('route' => array('dogs.edit', $dog->id)
我是一名优秀的程序员,十分优秀！