流畅的菜单导航

Question

I'm currently in the midst of developing a site. 我目前正在开发网站。 The current layout is pretty basic. 当前的布局非常基本。

There's a horizontal menu navigation across the top, and there is a main centered div beneath the menu that holds the rest of the HTML and information and so on. 顶部有一个水平菜单导航，菜单下面有一个主要居中的div，用于保存其余的HTML和信息等。

Now, when a user clicks on an item in the horizontal menu, the page reloads to display the new page with the new HTML as it should. 现在，当用户单击水平菜单中的项目时，页面将重新加载以显示具有新HTML的新页面。 However, on each page I have to copy the menu HTML to it. 但是，在每个页面上，我必须将菜单HTML复制到该页面。 This seems redundant and unnecessary. 这似乎是多余和不必要的。 So I was thinking about it and thought of this way... 所以我正在考虑，并想到了这种方式...

Through javascript, I get the html page and display on the main content div. 通过javascript，我得到html页面并显示在主要内容div上。 Like so... 像这样

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

All scripts, css, and html and now loaded onto the main original page. 现在将所有脚本，css和html加载到原始原始页面上。 I can two immediate benefits... 我有两个直接的好处...

The page has a seamless, smooth transition when it comes to displaying a new page 该页面在显示新页面时具有无缝，平滑的过渡
I do not have redundant HTML when it comes to the menu 菜单上没有多余的HTML

Is this optimal though? 这是最佳选择吗？ Is it a good practice to use a $.get(); 使用$.get();是一个好习惯吗$.get(); call to load a new HTML page as the main method of page navigation? 调用以加载新的HTML页面作为页面导航的主要方法？ Are there better alternatives? 有更好的选择吗？

I've considered Jquery Tabs but this requires all of the HTML to be loaded beforehand, which I was hesitant about. 我考虑过“ jQuery选项卡”，但这需要事先加载所有HTML，对此我很犹豫。

Answer 1

The answer is that it depends. 答案是，这取决于。

If there are multiple pages that have similar layouts and simple elements, then yes, the $.get(); 如果有多个页面具有相似的布局和简单元素，则可以， $.get(); method would work, but could be even faster and smoother. 方法可以使用，但可以更快，更流畅。

When I come across this junction, I would rather just keep the existing HTML elements and just load new content into them. 当我遇到这个交汇处时，我宁愿保留现有的HTML元素并将新内容加载到其中。

Again, I don't have the full code, so I could show you (and anyone else who sees this) what I mean if you shared, but that's up to you. 同样，我没有完整的代码，因此我可以向您（和其他看到此信息的人）展示您共享的意思，但这取决于您。

Now, if some of the pages had more complex elements, you should navigate by reloading. 现在，如果某些页面具有更复杂的元素，则应通过重新加载进行导航。

In that space, consistency is key. 在此空间中，一致性是关键。

To not be redundant with your code, you just need to make your site like a template. 为了避免多余的代码，您只需要使您的网站像模板一样即可。

For example, you could have three pages (header, footer, and the page itself) and use PHP to load the header and footer in while only writing the code once. 例如，您可能有三个页面（页眉，页脚和页面本身），并使用PHP加载页眉和页脚，而只编写一次代码。

header.html 了header.html

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

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

index.php 的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 footer.html

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

What this allows is, aside from edit once, do everywhere, non-redundant HTML and also for CSS edits to be preserved across the site, as long as in each individual page the <div> 's are in the same class 这允许的是，除了一次编辑之外，在所有地方都可以进行非冗余的HTML处理，并且还可以在整个网站上保留CSS编辑，只要在每个单独的页面中<div>都在同一类中

Again, as I first said, it all depends. 再次，正如我首先说的，这一切都取决于。

If you have simple content and don't mind spaghetti code, you would be better suited to just replace the div info directly on each navigation use. 如果您的内容简单而又不介意意大利面条式代码，则最好只在每次导航使用时直接替换div信息。

But, this method is, at least from what I've experienced, more widespread and versatile, so I'd recommend the template-esque method with PHP being loaded in. 但是，至少从我的经验来看，这种方法更为广泛和通用，因此，我建议在其中加载PHP的模板式方法。

流畅的菜单导航

问题描述

1 个解决方案

解决方案1
0 2014-01-20 18:10:54

流畅的菜单导航

问题描述

1 个解决方案

解决方案1 0 2014-01-20 18:10:54

解决方案1
0 2014-01-20 18:10:54