从隐藏的Div中加载内容

Load Content From a Hidden Div?

本文关键字：加载 Div 隐藏      更新时间：2023-09-26

这里有一个教程: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加载内容?

replace 

$('#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对应的

  <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/

第二个在fadeIn之前有fadeOut的示例:http://jsfiddle.net/9xZrq/1/

你可以把渐变的延迟时间从600调整到1200或者1500或者任何你想要的

请注意，您需要在链接id和隐藏的div id之间建立某种连接，以便您可以确定要显示哪个div。

我想你的div已经包含了他的数据，你只是想显示它，所以你可以使用:

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

或者我误解了你，你想从一个div加载内容到另一个?所以您可以使用html()检索他的内容。

如果我理解对了…只要调用对象的html属性就可以了。

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

这将返回div的内容，无论它是隐藏的还是没有。

应该能够做这样的事情(如果我收集你正确)- http://jsfiddle.net/HTrep/6/

您应该能够相当简单地从隐藏的div加载内容，因为您使用jquery来获得$()方法。

为div指定一个id，然后使用$('#id-of-element').innerHTML将为您提供隐藏div的内容。

相关文章：