流暢的菜單導航

我目前正在開發一個網站。目前的佈局是非常基本的。流暢的菜單導航

頂部有一個水平菜單導航，並且菜單下面有一個主要居中的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

回答