导航菜单，每个页面都有单独的链接答案

【问题标题】：nav menu with separate links for each page导航菜单，每个页面都有单独的链接
【发布时间】：2021-05-04 09:04:45
【问题描述】：

我创建了一个带有 5 个链接的 html/css 导航菜单栏，它可以工作。当我点击每个链接时，相应的页面会显示在当前页面/窗口中，替换显示导航菜单的页面。我需要导航菜单保持在顶部，并且页面中的内容应该显示在 menupage 的剩余部分。我怎样才能做到这一点？

我找到了一个使用 IFrame 并将每个 href 定位到 iframe 的选项。不确定这是否是正确的方法。

菜单页面的html代码如下

<body>
<header>
    <ul class = "nav">
        <li class = "navlink"> <a href="homepage.html"> Home </a> <li>
        <li class = "navlink"> <a href="products.html"> Products </a> <li>
        <li class = "navlink"> <a href="orderstatus.html"> Order status </a> <li>
        <li class = "navlink"> <a href="support.html"> Customer Support </a> <li>
    </ul>
</header>

</body>

【问题讨论】：

标签： html

【解决方案1】：

您可以通过将target="_blank"添加到您的 HTML 中来转到新的浏览器，如下所示：

<body>
<header>
    <ul class = "nav">
        <li class = "navlink"> <a href="homepage.html" target="_blank"> Home </a> <li>
        <li class = "navlink"> <a href="products.html" target="_blank"> Products </a> <li>
        <li class = "navlink"> <a href="orderstatus.html" target="_blank"> Order status </a> <li>
        <li class = "navlink"> <a href="support.html" target="_blank"> Customer Support </a> <li>
    </ul>
</header>

</body>

如果您希望它们保持在同一页面上，我建议您尝试单页方法，如果您使用 # 来定位特定 ID，例如：

<body>
<header>
    <ul class = "nav" style = "display:flex;list-style:none;position:fixed;top:0;left:0;">
        <li class = "navlink"> <a href="#homepage"> Home </a> <li>
        <li class = "navlink"> <a href="#products"> Products </a> <li>
        <li class = "navlink"> <a href="#orderstatus"> Order status </a> <li>
        <li class = "navlink"> <a href="#support"> Customer Support </a> <li>
    </ul>
</header>

<section id="homepage">
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
<h1>homepage</h1>
</section>


<section id="products">
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
<h1>products</h1>
</section>


<section id="orderstatus">
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
<h1>orderstatus</h1>
</section>


<section id="support">
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
<h1>support</h1>
</section>

</body>

【讨论】：

我需要单个 html 页面保持在显示的导航菜单下的同一菜单页面上。 “#”解决方案不起作用，因为各个页面很复杂，需要单独的html文件

【解决方案2】：

ReactJS： 您可以为导航栏创建组件并将其导出。

PHP： 您可以为导航栏创建文件并将此文件包含在您想要的页面中。

在纯 HTML 中，您可以通过重写导航代码来做到这一点

【讨论】：

对不起，但不明白第三部分“在纯 HTML 中，您可以通过重写导航代码来做到这一点”
对不起，这只是 HTML