如何在不重新加載的情況下顯示多個內容？

我正在開發一些基於html5的網頁。在我的頁面上，我想擁有一些nav以及包含選定內容的容器。但是我不想在點擊菜單位置後重新加載頁面。如何在不重新加載的情況下顯示多個內容？

起初我想過把整個內容放在網站上，隱藏其中的一些內容並點擊後顯示。

very simple example of this

但也有很多內容被隱藏的，我不知道這是一個好主意。

然後我想通過javascript包含來自.html文件的內容並將它們放在網站上，但我的小研究告訴我這是非常糟糕的做法。 Some article.

也這是小的，簡單的頁面，我不想使用任何後端技術。

所以，我的問題是：這樣做的最佳做法是什麼？

任何幫助，將不勝感激。

來源

2013-02-25 Mateusz Rogulski

我在我的網站上使用.html，所以我不必重新加載數據，每次它只與jquery中的.ajax相對應，這兩者都非常有用 – ryanc1256 2013-02-25 21:08:01

Iframes可能對此有所幫助。並不總是隱藏和顯示div，只是加載到一個容器中。 – tymeJV 2013-02-25 21:08:19

您可能想查看jQuery的['.load']（http://api.jquery.com/load/）函數。它專門用於調用服務器並獲取可附加到指定元素的附加html。 – War10ck 2013-02-25 21:08:44

我不確定什麼是最好的方式，但我建議使用jQuery's .load()與jQuery's .ajaxSetup()一起。

首先，使用.ajaxSetup()，這樣您就可以緩存未來的ajax請求。

$.ajaxSetup({ 
    cache: true 
});

然後，結合使用一個.click()事件。

這裏是我的示例代碼...

HTML：

<ul id="nav"> 
    <li id="first">first</li> 
    <li id="second">second</li> 
    <li id="last">last</li> 
</ul> 
<ul id="contents"> 
    <li id="content1">first</li> 
    <li id="content2">second</li> 
    <li id="content3">last</li> 
</ul>

JAVASCRIPT：

$(document).ready(function(){ 
    $.ajaxSetup({ 
     cache: true 
    }); 

    $('#nav>li').click(function(){ 
     var url = 7; 
     index = $(this).index(); 
     url += index; 
     $('#content' + (index + 1)).load('http://fiddle.jshell.net/dirtyd77/jUEEd/' + url + '/show/'); 
    }); 
});

DEMO： http://jsfiddle.net/dirtyd77/jUEEd/13/

希望這有助於讓我知道你是否有任何問題！

來源

2013-02-25 22:22:52 Dom

要添加到此，您可能需要添加一些hashtag更改或類似（pushState），以便您可以通過內容鏈接+前進/後退。 – Daniel 2013-02-26 12:28:21

我同意。這將是一個好主意。 – Dom 2013-02-26 14:56:04

如何在不重新加載的情況下顯示多個內容？

回答

相關問題