使用appendTo和加載點擊功能

jQuery newb和第一張海報。請溫柔:-)我已經搜索並找不到答案，但我確信有一個非常簡單的解決方案。使用appendTo和加載點擊功能

希望有人能幫助我。下面是我想要實現的：我有一行標籤，除了第一個標籤頁使用點擊函數將外部頁面加載（）到所需的div。第一個標籤會默認加載其內容，而不是來自外部文件，而是來自頁面上已有的div，但是爲了SEO的原因，還要下放代碼。

單擊任何其他選項卡讀取來自外部網頁內容到格但如果你再要回去標籤1，因爲它已經從負載（）代替內容的內容是不可用的 - 即不再DOM。

我想我可以在調用load（）之前附加到#temp div，然後在單擊tab 1鏈接時追加回來，但必須有更優雅的解決方案嗎？

這裏是到目前爲止的代碼：

$(document).ready(function(){ 

    // default tab1 content div appended to containing div OK 
    $("#innerDiv1").appendTo("#outerDiv"); 

    // tab2 link loads page2.html OK 
    $("#link2").click(function(){ 
     $("#outerDiv").load("page2.html"); 
    }); 

    // This doesn't work as it's no longer in the DOM after #link2 clicked. 
    $("#link1").click(function(){ 
     $("#innerDiv1").appendTo("#outerDiv"); 
    }); 

});

有什麼想法和答覆不勝感激。

在此先感謝中號

來源

2012-03-06 Marcus

像我確定它看起來那麼好...它不是很書籤友好 - 它基本上意味着用戶只能永遠書籤第一頁.... – ManseUK 2012-03-06 17:21:49

更改#link1單擊處理程序是：

$("#link1").click(function() { 
    $("#outerDiv").load('originalurl.html #innerDiv1'); 
});

這個使用AJAX來加載初始頁面，但只有抓住「＃innerDiv1」部分和取代了#outerdiv與它的內容。您需要將originalurl.html替換爲您的實際網址...可能可以使用location.href，除非您更新書籤？

來源

2012-03-06 17:16:55 ManseUK

謝謝曼塞，正是我在找的東西。 – Marcus 2012-03-06 17:48:35

我會存儲每個#outerDiv的內容，爲每個標籤的地方。您可以使用jQuery's data method。或者，您爲每個選項卡創建一個.outerDiv，第一次加載內容，然後僅顯示活動選項卡的.outerDiv並隱藏其餘部分。

來源

2012-03-06 17:15:46

謝謝TJ，將實驗。 – Marcus 2012-03-06 17:49:26

大多數標籤系統爲每個標籤都有單獨的內容容器。點擊標籤可隱藏可見內容並顯示與當前選中標籤關聯的隱藏內容。這聽起來像你正在做的每一次都會清除html，這使得編碼工作量大大增加。

像jQuerUI這樣更強大的選項卡系統集成了ajax選項，以簡化許多您所需要的功能。既然你說你是在這個新的......這將是非常值得使用的解決方案，也提供了出色的支持，如jQueryUI的

http://jqueryui.com/demos/tabs/

來源

2012-03-06 17:16:18 charlietfl

謝謝，將看看 – Marcus 2012-03-06 17:44:24

你可以嘗試jQuery的標籤控件：http://jqueryui.com/demos/tabs/

它應該使創建一個標籤式的界面更容易，你可以一次包含所有的內容或通過AJAX加載，這是一個可彎曲的小部件。

來源

2012-03-06 17:16:33

使用appendTo和加載點擊功能

回答

相關問題