所以我的学校网站导航栏有很多链接等等，每次创建新页面时都要在每个页面上添加新项目，这会变得很乏味。我试着使用或相关的东西，然后用导航栏链接html，但它没有显示我链接的任何CSS。
这是导航栏的代码：
下面是一些我被告知要做的事情的例子：
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("navbar.html");
});
</script>
上图：只是让导航栏完全消失。答案是"把它放在服务器上，它会工作的"，但我目前不能这样做，因为服务器不工作。在这里找到(得票最多)。是的，我确实链接了它说的脚本。
<object name="navigation" type="text/html" data="navbar.html"></object>
这个让它看起来像这样。做了同样的事。在这里找到。
导航栏应该是这样的。
这是导航栏的代码：
<nav class="navbar">
<ul>
<li><a href="../DennisCourseSite.html">Home</a></li>
<li><a href="unita.html">Unit A</a></li>
<li><a href="unitb.html">Unit B</a></li>
<li><a href="unitc.html">Unit C</a></li>
<li><a href="unitd.html">Unit D</a></li>
<li><a href="unite.html">Unit E</a></li>
<li><a href="unitf.html">Unit F</a></li>
<li><a href="unitg.html">Unit G</a></li>
<li><a href="unith.html">Unit H</a></li>
<li><a href="../glossary.html">Glossary</a></li>
</ul>
这是css(如果需要)：
nav {
font-family: 'Open Sans', sans-serif;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666666;
display: block;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
nav li {float: left;}
nav li:hover {background-color: #737373;}
注意：以上所有与导航条相关的代码都嵌套在一个元素中，如下所示：
<header class="head>
<!--navbar reference/include thing-->
</header>
很抱歉，如果它过于复杂，我认为人们可能需要所有的资源。
错误的方法imho。通过使用Jq
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
在html的head标签中，vanilla-js没有处理的方法
尝试这种方式
创建一个文件index.html(下面的代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$( "#container" ).load( "bar.html" );
console.log('Done');
});
</script>
<style type="text/css">
.obj-center {
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.navbar {
position: absolute;
width: 80%; height: 10%;
border: 1px #000 solid;
}
ul {
position: absolute;
width: 100%; height: 100%;
}
li {
display: inline-block;
}
</style>
</head>
<body>
<div id = "container"></div>
</body>
</html>
创建一个文件bar.html(下面的代码)
<nav class="navbar obj-center">
<ul>
<li><a href="../DennisCourseSite.html">Home</a></li>
<li><a href="unita.html">Unit A</a></li>
<li><a href="unitb.html">Unit B</a></li>
<li><a href="unitc.html">Unit C</a></li>
<li><a href="unitd.html">Unit D</a></li>
<li><a href="unite.html">Unit E</a></li>
<li><a href="unitf.html">Unit F</a></li>
<li><a href="unitg.html">Unit G</a></li>
<li><a href="unith.html">Unit H</a></li>
<li><a href="../glossary.html">Glossary</a></li>
</ul>
</nav>
$(document).ready(function()｛｝)；-->文档准备好后，将立即执行此处的代码
$("#container").load("bar.html")；-->加载内部索引div bar.html内容
为了改善图形效果，考虑使用"表格布局：固定"样式的表格
希望这将帮助您
Hele
我认为在您的第一个示例中可能存在一些javascript错误(请检查控制台)。这将导致无法正确加载导航。
在第二个例子中，我认为navbar.html是作为一个对象加载的，这意味着你很可能需要在nawbar.html本身中加载css，因为它可能无法从加载的html文档中获得css。
也许在您的情况下，使用PHP在每个页面中包含导航栏听起来是一个更简单的解决方案。请参阅此处的信息。