Brando ZWZは、この状況に対処するためのいくつかの優れた回答を提供します。
Re:複数のページに同じナビゲーションバー2018年8月21日10:13 AM | LINK
私の知る限り、複数の解決策があります。
例えば:
ナビゲーションバーのコード全体はnav.htmlファイルにあります(htmlまたはbodyタグはなく、ナビゲーションバーのコードのみ)。
次に、多くのコードを記述せずに、jqueryから直接ロードできます。
このような:
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
解決策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];
}
}
}
}
HTML:
<!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
about.html
すると、ブラウザに読み込まれます。したがって、同じナビゲーションが含まれている必要があります。