流畅的菜单导航

Question

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

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

现在，当用户单击水平菜单中的项目时，页面将重新加载以显示具有新HTML的新页面。 但是，在每个页面上，我必须将菜单HTML复制到该页面。 这似乎是多余和不必要的。 所以我正在考虑，并想到了这种方式...

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

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

现在将所有脚本，css和html加载到原始原始页面上。 我有两个直接的好处...

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

我考虑过“ jQuery选项卡”，但这需要事先加载所有HTML，对此我很犹豫。

Answer 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"; ?>

footer.html

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

这允许的是，除了一次编辑之外，在所有地方都可以进行非冗余的HTML处理，并且还可以在整个网站上保留CSS编辑，只要在每个单独的页面中<div>都在同一类中

再次，正如我首先说的，这一切都取决于。

如果您的内容简单而又不介意意大利面条式代码，则最好只在每次导航使用时直接替换div信息。

但是，至少从我的经验来看，这种方法更为广泛和通用，因此，我建议在其中加载PHP的模板式方法。