一个页面中的 HTML 菜单栏以包含在其他页面中

Posted 2023-02-16

技术标签:

【中文标题】一个页面中的 HTML 菜单栏以包含在其他页面中【英文标题】：HTML Menu Bar in one page to include in other pages 【发布时间】：2018-04-26 06:21:06 【问题描述】：

我正在用 html、CSS 和 javascript 编写主页，并且有一个关于制作菜单栏的问题。我已经设计了一个设计并将其放在我拥有的每个站点上，但我也考虑过要更改其中的一些小东西会有多复杂。所以我尝试制作一个只显示菜单栏的网站，然后在每一页的开头链接它。这将使我能够最大限度地减少更改菜单栏中的内容的工作量。但我是一个非常初学者，所以我并没有完全失败。如果有人可以帮助我，那就太好了。我是德国人，不擅长说或写英语，所以对于我可能犯的错误，我深表歉意。

如果您可能需要，我使用的代码：

 ul 
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    

    li 
        float: left;
    

    li a, .dropbtn 
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    

    li a:hover, .dropdown:hover .dropbtn 
        background-color: red;
    

    li.dropdown 
        display: inline-block;
    

    .dropdown-content 
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    

    .dropdown-content a 
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    

    .dropdown-content a:hover background-color: #f1f1f1

    .dropdown:hover .dropdown-content 
        display: block;

 <!DOCTYPE html>
    <html>
    <head>
        <title>Startseite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Startseite">
        <meta name="description" content="Meine Startseite">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <ul id="fixed">
      <li><a href="menu.html">Startseite</a></li>
      <li><a href="timetable.html">Stundenplan</a></li>
      <li><a href="report.html">BOGY-Bericht</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Javascript</a>
        <div class="dropdown-content">
          <a href="js1.html">Beispiele 1</a>
          <a href="js2.html">Beispiele 2</a>
        </div>
      </li>
      <li><a href="animation.html">Animationen</a></li>
      <li><a href="canvas.html">Bouncing Ball</a></li>
      <li><a href="links.html">Verweise</a></li>
        </ul>
    </body>
    </html>

【问题讨论】：

您可以使用一点 php 并创建一个 header.php 和 footer.php 然后在您的页面中使用它们。喜欢：<?php require header.php ?> your html code <?php require footer.php ?>我会为你做一个plunker。 html 只允许您使用嵌入代码在彼此的页面中导入页面，这在您的情况下不是最佳解决方案，我使用 SupremeDEV 的答案并建议您使用 php 文件并将它们包含到您的页面中。 ps 当我们说 php 时不要惊慌，它只是您的文件格式，内容只是您的导航 html 代码。无需 php 代码。另外，如果你使用Ruby on Rails，你可以像_header.html.erb一样创建一个partial，然后像这样在application.html.rb中渲染它：<%= render 'header' %> 【参考方案1】：

这可以是你的header.php

<html>
     <body>
           <header>Hello World</header>
           <div>

这可以是你的footer.php

           </div>
           <footer>Bye World</footer>
     </body>
</html>

这可能是您的其他页面示例：other.php

<?php include ('header.php'); ?>
My html here.
<?php include ('footer.php'); ?>

试试看，希望对你有帮助。

【讨论】：

它显示的所有内容都是“我的 html 这里。”。没有footer.php und header.php 中的文字 @Trauma 是 header.php 和 footer.php 与 other.php 在同一地图中吗？如果不是，您应该正确链接它们。否则尝试将它们放在同一张地图中。我已经测试了代码，它应该对我有用。 @Trauma 您是否在某个本地主机服务器上运行它？如。 xampp、usbwebserver、wamp 等。请注意，php 必须在任何 apache 服务器上运行。我只是做“用Firefox打开”，这就是它所显示的。我也想用 Internet Explorer 试试，但我认为这不会有什么不同在 Internet Explorer 中，它尝试下载文件 other.php，如下面的另一个答案中所示【参考方案2】：

You have to make a new folder for include in which common data should be placed (header.php and footer.php)
Name of first File - index.php -
<?php include('include/header.php'); ?>

Name of the second file - header.php(contains Common data (menu bar) )
header.php
<!DOCTYPE html>
        <html>
        <head>
            <title>Startseite</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="keywords" content="Startseite">
            <meta name="description" content="Meine Startseite">
            <link rel="stylesheet" href="style.css">
        </head>
 <body>
   <ul id="fixed">
          <li><a href="menu.html">Startseite</a></li>
          <li><a href="timetable.html">Stundenplan</a></li>
          <li><a href="report.html">BOGY-Bericht</a></li>
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Javascript</a>
            <div class="dropdown-content">
              <a href="js1.html">Beispiele 1</a>
              <a href="js2.html">Beispiele 2</a>
            </div>
          </li>
          <li><a href="animation.html">Animationen</a></li>
          <li><a href="canvas.html">Bouncing Ball</a></li>
          <li><a href="links.html">Verweise</a></li>
            </ul>

Name of third file is footer.php
      
    Footer.php
        </body>
        </html>

文件应使用 php 扩展名保存

你必须在每个单独的页面中使用这个包含文件

 &lt;?php include('include/header.php'); ?&gt;

在每个单独的页面上添加包含文件

【讨论】：

这看起来很不错，但它似乎对我不起作用。我复制了你说的所有内容，但是如果我运行文件，则什么都没有。还尝试了一个教程来包含，它发生了同样的情况那请检查文件名或者文件扩展名是否正确请在主文件夹中新建一个include文件夹，并放置header.php,footer.php,main.php文件 imgur.com/a/4tM3AuE 我有这样的文件夹，并在文件中复制了你写的内容，imgur.com/a/FEDyKPh 这是显示给我的内容-.- 为什么body标签和head标签显示在include标签的顶部

以上是关于一个页面中的 HTML 菜单栏以包含在其他页面中的主要内容，如果未能解决你的问题，请参考以下文章

如何在jsf中的所有页面中设置菜单栏[重复]

使用 bootstrap 5 cdn 时 Jquery 包含的菜单未显示在 html 页面上

JS如何实现点击页面其他地方隐藏菜单？

导航菜单中的内容被推到左侧

Eclipse 中的错误“当前显示的页面包含无效值”

菜单未显示在 html 页面中[关闭]