HTML 包括一个导航栏（有效 css）

Question

所以我的学校网站导航栏有很多 link 之类的东西，每次我创建一个新页面时都要不断地向每个页面添加新项目，这变得很乏味。我尝试使用或相关的东西，然后 link 使用导航栏 html，但它没有显示任何 CSS 我也 linked。

这是导航栏的代码：

下面是我被要求做的一些例子：

     <div id="nav-placeholder">

     </div>

     <script>
        $(function(){
           $("#nav-placeholder").load("navbar.html");
        });
     </script>

上图：只是让导航栏完全消失。答案是 "put it on a server it will work" 但我目前不能这样做，因为服务器不工作。找到 here（票数最高的答案）。是的，我做了 link 它所说的脚本。

<object name="navigation" type="text/html" data="navbar.html"></object>

这个看起来像 this. did the same. Found here。

This is what the navbar is supposed to look like.

这是导航栏的代码：

<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>

抱歉，如果它过于复杂，我认为人们可能需要所有资源。

Answer 1

我认为在您的第一个示例中可能存在一些 javascript 错误（检查您的控制台）。这将导致无法正常加载导航。

在第二个示例中，我认为 navbar.html 是作为对象加载的，这意味着您很可能需要在 navbar.html 本身中加载 css，因为它可能不能从加载它的 html 文档中获取 css。

也许在您的情况下，使用 PHP 在每个页面中包含导航栏听起来是一个更简单的解决方案。 See information here.

Answer 2

错误的方法恕我直言。通过

使用 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>

$(文档).ready(函数(){}); --> 这里的代码将在文档准备好后立即执行
$( "#container" ).load( "bar.html" ); --> 加载里面的index div bar.html content

要改善图形效果，请考虑使用 table 和 "table-layout: fixed" 样式

希望对你有所帮助
嘿嘿

HTML 包括一个导航栏（有效 css）

HTML Including a navbar (with working css)

html

css

nav