我刚刚完成了home/index.html页面.将导航栏保持在原位,并在用户点击我的所有页面时保持导航栏.我是否必须将导航代码复制并粘贴到每个页面的顶部？或者还有另一种方法可以看起来更干净吗？
HMTL导航:
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
Ram*_*tin 52
这对我有所帮助.我的导航栏位于body标签中.导航栏的整个代码都在nav.html文件中(没有任何html或body标签,只有导航栏的代码).在目标页面中,这包含在head标记中:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
然后在body标签中,使用唯一的id和javascript块nav.html将容器加载到容器中,如下所示:
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
Jac*_*ais 26
我知道这是一个很老的问题,但是当你有JavaScript可用时,你可以使用jQuery和它的AJAX方法.
首先,创建一个包含所有导航栏HTML内容的页面.
接下来,使用jQuery的$.get方法来获取页面的内容.例如,假设您已将所有导航栏的HTML放入一个名为的文件中navigation.html并<div id="nav-placeholder">在您的文件中添加了占位符标签(Like )index.html,那么您将使用以下代码:
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
Men*_*rel 24
使用纯 JavaScript：
将导航栏 html 代码保存在nav.html文件中。
使用以下代码创建nav.js文件：
fetch('nav.html')
.then(res => res.text())
.then(text => {
let oldelem = document.querySelector("script#replace_with_navbar");
let newelem = document.createElement("div");
newelem.innerHTML = text;
oldelem.parentNode.replaceChild(newelem,oldelem);
})
在您想要导航栏的其他 html 文件中添加以下行：
<script id="replace_with_navbar" src="nav.js"></script>
这将用 nav.html 的内容替换脚本本身
您可以使用 php 制作多页面网站。
<?
php include 'header.php';
?>
（以上代码将转储在此之前的所有 html 代码）您的网站正文内容。
小智 5
Brando ZWZ 为处理这种情况提供了一些很好的答案。
回复：多个页面上有相同的导航栏 2018 年 8 月 21 日上午 10:13|LINK
据我所知，有多种解决方案。
例如：
导航栏的完整代码位于 nav.html 文件中（没有任何 html 或 body 标签，只有导航栏的代码）。
然后我们就可以直接从jquery加载它，而不用写很多代码。
像这样：
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
解决方案2：
您可以使用 JavaScript 代码生成整个导航栏。
像这样：
JavaScript 代码：
$(function () {
var bar = '';
bar += '<nav class="navbar navbar-default" role="navigation">';
bar += '<div class="container-fluid">';
bar += '<div>';
bar += '<ul class="nav navbar-nav">';
bar += '<li id="home"><a href="home.html">Home</a></li>';
bar += '<li id="index"><a href="index.html">Index</a></li>';
bar += '<li id="about"><a href="about.html">About</a></li>';
bar += '</ul>';
bar += '</div>';
bar += '</div>';
bar += '</nav>';
$("#main-bar").html(bar);
var id = getValueByName("id");
$("#" + id).addClass("active");
});
function getValueByName(name) {
var url = document.getElementById('nav-bar').getAttribute('src');
var param = new Array();
if (url.indexOf("?") != -1) {
var source = url.split("?")[1];
items = source.split("&");
for (var i = 0; i < items.length; i++) {
var item = items[i];
var parameters = item.split("=");
if (parameters[0] == "id") {
return parameters[1];
}
}
}
}
网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-bar"></div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<%--add this line to generate the nav bar--%>
<script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>
https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages
| 归档时间： |
|
| 查看次数： |
127274 次 |
| 最近记录： |