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应该有唯一的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/

在淡入淡出之前具有fadeOut的第二个样本：http://jsfiddle.net/9xZrq/1/

您可以将fadeIn所需的延迟从600更改为1200或1500或任何您想要的

请注意，您需要在链接ID和隐藏的div ID之间建立一些连接，以便您可以找出要显示的div。

Answer 2

我认为您的div已经包含了他的数据而您只想展示它，所以您可以使用：

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

或者我误认为你想要将div的内容加载到另一个内容？因此，您可以使用html()检索其内容。

Answer 3

如果我理解正确...只需调用您的对象html属性即可...

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

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

Answer 4

应该可以做这样的事情（如果我正确地聚集你） - http://jsfiddle.net/HTrep/6/

Answer 5

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

给div一个id，然后使用$('#id-of-element').innerHTML将给你隐藏div的内容。

从隐藏的Div加载内容？

5 个答案: