流暢的菜單導航

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的模板式方法。