Question

我想要一些插件只有一件事必须是不同的，有2个div的2个链接我想显示那里的例子10 div但只有一个按钮，如“加载更多”我怎么能做到这一点？

html

<a href="#hidden1" class="link">Click1</a>
<a href="#hidden2" class="link">Click2</a>
<div id="outer">
<div id="inner">Initial content</div>
</div> 
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>

Js

$(document).ready(function() {
    $('.link').click(function() 
                     {
        var id = $(this).attr('href'); 
                         $('#inner').fadeOut('slow', function() {
            $('#inner').html($(id).html());
            $('#inner').fadeIn('slow');


        })
    })
})

CSS

#hideMsg{
    text-align:center;
    padding-top:10px;
}

http://jsfiddle.net/G5qGs/2/

Answer 1

你可以这样做。

创建一个加载更多按钮

<a href="javascript:void(0);" id="loadmore">Load More</a>

使用下面的javascript

 var count = 1;
    $('#loadmore').click(function() {
        $('#inner').fadeOut('slow', function() {
            $('#inner').html($("#hidden" + count).html());
            $('#inner').fadeIn('slow');
            count++;
        })
    });

工作示例

http://jsfiddle.net/G5qGs/25/

P.S：您可能希望在结尾处显示“不再有内容”。这可以通过简单的if else条件来实现

使用load more按钮将新div加载到现有div中

1 个答案: