从隐藏的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