流畅的菜单导航答案

【问题标题】：Smooth menu navigation流畅的菜单导航
【发布时间】：2014-02-09 22:20:30
【问题描述】：

我目前正在开发一个网站。当前的布局非常基本。

顶部有一个水平菜单导航，菜单下方有一个主居中的 div，用于保存其余的 HTML 和信息等。

现在，当用户单击水平菜单中的某个项目时，页面会重新加载以显示具有新 HTML 的新页面。但是，在每个页面上，我都必须将菜单 HTML 复制到其中。这似乎是多余和不必要的。于是我就想了想，就这么想了……

通过 javascript，我得到了 html 页面并显示在主要内容 div 上。就这样……

$.get( "newpage.html", function( data ) {
     $("#content-div").html( data );
});

所有脚本、css 和 html 现已加载到主原始页面。我可以立即获得两个好处...

这是最优的吗？使用$.get(); 调用加载新的 HTML 页面作为页面导航的主要方法是一种好习惯吗？有更好的选择吗？

我考虑过 Jquery 选项卡，但这需要预先加载所有 HTML，我对此犹豫不决。

【问题讨论】：

【解决方案1】：

答案是视情况而定。

如果有多个页面具有相似的布局和简单的元素，那么是的，$.get(); 方法可以工作，但可以更快更流畅。

当我遇到这个连接点时，我宁愿只保留现有的 HTML 元素并在其中加载新内容。

再说一次，我没有完整的代码，所以我可以告诉你（以及任何看到这个的人）如果你分享了我的意思，但这取决于你。

现在，如果某些页面包含更复杂的元素，您应该通过重新加载来导航。

在那个领域，一致性是关键。

为了不让你的代码变得多余，你只需要把你的网站变成一个模板。

例如，您可以拥有三个页面（页眉、页脚和页面本身）并使用 PHP 加载页眉和页脚，而只编写一次代码。

header.html

<html>
<head>
Fill with meta info, title, etc.
</head>

<body>
<div class="nav">
Put the nav here.
</div>

index.php

<?php include_once "header.html"; ?>
<div class="main">
Just fill it with all the page's content.
</div>
<?php include_once "footer.html"; ?>

页脚.html

<div class="footer">
Footer info here.
</div>
</body>
</html>

这允许的是，除了编辑一次，到处都做，非冗余 HTML 以及 CSS 编辑在整个站点中被保留，只要在每个单独的页面中 <div> 是在同一个类中

同样，正如我第一次说的，这一切都取决于。

如果您有简单的内容并且不介意意大利面条式代码，您会更适合在每次导航使用时直接替换 div 信息。

但是，至少从我的经验来看，这种方法更广泛、更通用，所以我推荐加载 PHP 的模板式方法。

【讨论】：