css - 菜单栏上的 HTML5 链接离开当前页面

Question

我有一个链接到本地​​网页的菜单栏，它工作正常，除了当我点击菜单栏上的链接时，它会转到有问题的网页，留下带有菜单栏的网页，但我希望加载下面的页面菜单栏，这样用户就可以使用菜单栏进行导航。我应该使用 iframe 吗？抱歉，很长一段时间没有使用 HMTL5，非常感谢任何帮助。

尼尔。

<div class="menu">
        <a href="home.hmtl">Home</a>
        <a href="index.html">Index of Services</a>
        <a href="schedule.html">Schedule</a>
        <a href="examples.hmtl">Examples</a>
     </div>
    <div class="content">

    This page is to help you organise

</div>

Answer 1

是的，你需要框架。或者，最常见的是，在所有 html 上使用相同的菜单代码，因为使用框架，您的 url 不会改变，除非您采取一些技巧。

如果您不想重复代码，您可以使用 PHP。然后，您可以创建一个包含菜单和包含页面内容的 index.php。

编辑:
您也可以使用一些 JavaScript 来完成它，但它也有与 url 相同的问题。如果禁用 JavaScript，该网站也将无法运行。

编辑2: 我之前说的frame和javascript的tricks可以在不重写url的情况下实现，纯HTML+CSS+JS就是带 anchor 。

基本上，您将 url 更改为带有页面名称的 anchor ，并且在首次加载页面时检查此哈希，以便在有人输入您的 url 时打开正确的框架，例如 http://mypage.com/#examples 。您可以使用 window.location.hash 访问和设置哈希。

所以你的代码应该是这样的:

<div class="menu">
    <a href="#home">Home</a>
    <a href="#index">Index of Services</a>
    <a href="#schedule">Schedule</a>
    <a href="#examples">Examples</a>
</div>
<div class="content">
    This page is to help you organise
</div>

无论有无框架，您都需要将 JavaScript 事件附加到每个菜单项。

有了框架，JS 基本上会在用户单击菜单时更改框架 url。

如果没有框架，您可以使用 xhr 下载 html，然后，如果您成功下载了 html，则删除 div.content 中的所有内容并替换为您下载的内容使用 innerHtml。

对于这两种解决方案，您都需要添加一个 JS，它会在您首次加载页面时检查哈希值，以相应地更新显示的页面。

至于 PHP 或其他服务器端“脚本”，任何初学者教程都会解释如何操作。