加载内容从一个隐藏的股利？ [英] Load Content From a Hidden Div?

问题描述

还有这里是一个教程： HTTP：//perishable$p$pss.com /幻灯片淡出内容/

There is a tutorial here: http://perishablepress.com/slide-fade-content/

和c它提供了$ C $是：

and the code it provides is:

$(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;
    });
});

这将加载外部文件的内容，有没有办法做同样的事情，但加载从一个隐藏分区的内容在同一页上？

This will load content from an external file, is there a way to do something similar but to load the content from a hidden div on the same page?

推荐答案

替换

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

Assuming you have the hidden div with the id myHiddenDivId

编辑：从提供您的评论和样本的链接，这是我更新的解决方案

1）有在一个单独的分区对每个项目的内容和隐藏。这个DIV应该有唯一的ID 2）当你点击链接，你得到对应于隐藏的DIV ID和加载内容。

1) Have the content for each item in a seperate div and hide it. this div should have unique id 2) when you click on the links you get the id and load content from the hidden div corresponding to that.

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/

Second sample which has the fadeOut before fadeIn : http://jsfiddle.net/9xZrq/1/

您可以更改您所需要的淡入从600到1200或1500或拖延任何你想要的

You can change the delay you need for fadeIn from 600 to 1200 or 1500 or whatever you want

请注意，你需要有链接ID和隐藏的DIV ID之间有着某种联系，这样你可以找出哪些div来进行显示。

Note that you need to have some connection between the link id and hidden div id so that you can figure out which div to be showed.

这篇关于加载内容从一个隐藏的股利？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！