流畅的菜单导航

我目前正在开发一个网站。目前的布局是非常基本的。流畅的菜单导航

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

现在，当用户单击水平菜单中的某个项目时，页面将重新加载，以便按照它应该显示的那样使用新的HTML显示新页面。但是，在每个页面上，我必须将菜单HTML复制到它。这看起来多余而且没有必要所以我一直在想它，并想到这种方式...

通过JavaScript，我得到的HTML页面，并显示在主要内容div。像这样...

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

所有脚本，CSS和HTML现在加载到主原始页面上。我可以在两个直接好处......

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

我已经考虑了Jquery Tabs，但是这需要所有的HTML事先加载，这是我犹豫不决。

2014-01-20 prawn

答案是，它取决于。

如果有多个页面具有相似的布局和简单元素，那么是的，$.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加载的模板方式。

2014-01-20 18:10:54 copilot0910

回答