Загрузить контент из скрытого 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(){ 

Если у вас есть скрытые DIV с идентификатором myHiddenDivId

EDIT: Как из Вашего комментария и образца ссылке, указанной, Вот мой обновленный раствор

1) Имейте содержимое для каждого элемента в отдельном div и спрячьте его. этот div должен иметь уникальный идентификатор 2) когда вы нажимаете на ссылки, вы получаете идентификатор и загружаете контент из скрытого 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/

Второй образец, который имеет FADEOUT перед тем FadeIn: http://jsfiddle.net/9xZrq/1/

Вы можете изменить задержку нужна для FadeIn от 600 до 1200 или 1500 или что вы хотите

Обратите внимание, что вам нужно иметь какую-то связь между идентификатором ссылки и скрытым сНу идентификатором, так что вы можете выяснить, какой DIV для показа.

Answer 2

Я полагаю, что ваш div уже содержит свои данные, и вы просто хотите, чтобы показать это, так что вы можете использовать:

$('#id_of_your_div').show().fadeIn(); 

Или Я ошибаюсь и вы хотите загрузить содержимое из div в другой? Таким образом, вы можете получить его контент с html().

Answer 3

Если я понимаю правильно ... просто назвать свой объект html атрибут, чтобы сделать это ...

$('#yourdiv').html(); 

Это будет возвращать содержание div независимо от того, что скрыто или нет.

Answer 4

Вы должны иметь возможность загружать контент из скрытого div достаточно просто, поскольку вы используете jquery для использования метода $().

Дайте div id, после чего с помощью $('#id-of-element').innerHTML вы получите содержимое скрытого div.

Answer 5

должен иметь возможность просто сделать что-то вроде этого (если я соберу вас правильно) - http://jsfiddle.net/HTrep/6/