链接应该导航到新页面，还是显示不同的 div？

Question

代码示例：

无页面导航：

<body>
   <nav>
      // Navigation links to the parts of the site.
      // Clicking a link calls a javascript function to display the relevant <div>
   </nav>
   <section id="page1">
      // Page 1 content
   </section>
   <section id="page2">
      // Page 2 content
   </section>
</body>

页面导航：

// Page1.php:
<body>
   <nav>
      // Navigation links to parts of the site.
      // Act as normal <a> tags, redirecting the browser to the new page
   </nav>
   <section>
      // Page1 content
   </section>
</body>

// Page2.php:
<body>
   <nav>
      // Navigation links to parts of the site.
      // Act as normal <a> tags, redirecting the browser to the new page
   </nav>
   <section>
      // Page2 content
   </section>
</body>

链接导航的优点：

• 浏览器不需要一次性加载整个网站

• 无需 javascript 即可使用该网站

• 提供直接 URL 以便于导航

• 似乎是标准的做法

javascript 导航的优点：

• 对于服务器端脚本繁重的网站（如我的），最大限度地减少页面请求

• 不需要在不同的地方使用相同的代码（例如<nav> 元素）。在 PHP 中创建 echo_nav_html() 函数并不是一个好的解决方案，因为它会使 IDE 环境中的编码变得烦人

• 初始加载后，站点速度超快，几乎没有任何新请求发送到服务器

哦，聪明的互联网，对此有什么想法吗？

或者也许更优雅的解决方案提供列出的 javascript 导航专家？

Answer 1

最好的解决办法是两者都做。

在锚点上的 HREF 上具有有效链接，但包括加载 div 并禁用 HREF 进度的 onClick 操作。

了解 graceful degradation 和 progressive enhancement。

提供非 JavaScript 代码的原因有很多。并非所有浏览器都支持 JavaScript。许多公司网络仍然使用旧版本的 IE，其行为可能无法预测，或者它们可能会强制配置完全禁用 JS。

您希望您的网站可供所有人使用，但要为那些拥有支持它的技术的用户提供尽可能好的体验。

Answer 2

如果您使用大量服务器端代码（假设这意味着动态内容生成/填充），我可能会使用指向其他页面的链接，因为我无法想象加载您可能在初始加载的网站是真正的资源效率高，特别是假设不是每个用户都会访问网站的任何部分。

您仍然可以使用 javascript，但我只会在实际请求时生成内容；无论是通过 AJAX 调用（因此在那里调用 URL）还是加载新页面。在运行时加载所有内容对我来说似乎有点浪费......不过这只是我。