從隱藏的div加載內容？

這裏有一個教程：http://perishablepress.com/slide-fade-content/從隱藏的div加載內容？

，它提供的代碼是：

$(document).ready(function(){ 
    // Ajax Slide & Fade Content with jQuery @ http://perishablepress.com/slide-fade-content/ 
    $('.more').live('click',function(){ 
     var href = $(this).attr('href'); 
     if ($('#ajax').is(':visible')) { 
      $('#ajax').css('display','block').animate({height:'1px'}).empty(); 
     } 
     $('#ajax').css('display','block').animate({height:'200px'},function(){ 
      $('#ajax').html('<img class="loader" src="http://example.com/slide-fade-content/loader.gif" alt="">'); 
      $('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){ 
       $('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'}); 
      }); 
     }); 
     return true; 
    }); 
});

這將從外部文件加載的內容，有沒有辦法做同樣的事情，但加載從內容一個隱藏的div在同一頁上？

來源

2011-12-14 Joe Bobby

檢查出JQuery的LIB您正在使用的「阿賈克斯」部分;） – 2011-12-14 18:11:16

更換

$('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){

與

var contentTobeLoaded=$("#myHiddenDivId").html() 
$('#ajax').html(contentTobeLoaded).fadeIn(600,function(){

假設你有隱藏的div id爲myHiddenDivId

編輯：由於從提供您的意見和樣本的鏈接，這是我的更新解決方案

1）將每個項目的內容放在單獨的div中並隱藏它。這個div應該有唯一的ID 2）當你點擊鏈接時，你會得到id並從隱藏的div中加載相應的內容。

HTML

<div id="divHiddenContainer" style="display:none;"> 
     <div id="divItem1"><span style="background-color:Gray;">God, My description about item 1 goes here</span></div> 
     <div id="divItem2"><span style="background-color:yellow;">Brother,My description about item 222 goes here</span></div> 
     <div id="divItem3"><span style="background-color:orange;">Hello,My description about item 333 goes here</span></div> 
    </div> 

    <a href="#" class="aItemLnk" id="a1">Item 1</a> 
    <a href="#" class="aItemLnk" id="a2">Item 1</a> 
    <a href="#" class="aItemLnk" id="a3">Item 1</a> 

    <h3>Content goes here</h3> 
    <div id="ajax"></div>

的Javascript

$(".aItemLnk").click(function() { 

    var id = $(this).attr("id").replace(/^.(\s+)?/, ""); 
    var contentTobeLoaded = $("#divItem" + id).html();   

    $('#ajax').html(contentTobeLoaded).fadeIn(600, function() { 
     //do whatever you want after fadeIn 
    }); 
});

這裏是工作樣例：http://jsfiddle.net/9xZrq/

第二個樣本，其淡入之前有淡出：http://jsfiddle.net/9xZrq/1/

你可以改變你需要的淡入從600到1200或1500的延遲或任何你想要的

請注意，您需要有鏈接ID和隱藏的DIV ID之間有着某種聯繫，這樣就可以找出哪些DIV被展示。

來源

2011-12-14 18:15:46 Shyju