javascript - 从隐藏的 Div 加载内容？

Question

这里有教程:http://perishablepress.com/slide-fade-content/

它提供的代码是:

$(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 加载内容？

Answer 1

替换

$('#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(){

假设你有id为myHiddenDivId的隐藏div

编辑:根据您提供的评论和示例链接，这是我更新的解决方案

1) 将每个项目的内容放在单独的 div 中并将其隐藏。这个 div 应该有唯一的 id2) 当你点击链接时，你会得到 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。