Php 带有“加载更多”按钮的Jquery选项卡

您好，对于每个选项卡中都有加载更多功能的php ajax选项卡，是否有任何参考/示例？假设我们有两个选项卡，当我们单击每个选项卡时，它将只显示选定数量的结果，直到我们单击每个结果末尾的load more按钮。谢谢我当前的代码似乎工作不正常，当我单击每个选项卡时，它会正确显示结果，但当我再次单击选项卡时，它会加载更多数据。以下是我当前的代码：

<li data-tab-id="self" class="tab selected"><a href="#">Near You</a><span class="unread-count hidden" style="display: none;"></span></li>


<li data-section-id="user_feed" data-component-bound="true">
    <ul class="module-list">                            
    <!-- USER ACTIVITY JSON -->
    </ul>
    <a class="ybtn ybtn-primary ybtn-large more-wishlist" href="#" onclick="getRecentActivityClick(event)">
    <span data-component-bound="true" class="loading-msg user_feed">See more recent activity</span>
    </a>
</li>

<script type="text/javascript">
var totalRecords = '<?= $this->totalRecords?>';
$(document).ready(function(){
getRecentActivity(totalRecords);
});

$(".hd-ui-activity li a").click(function(e) {
e.preventDefault();
var tabid = $(this).parent().attr('data-tab-id');
if(tabid == "self"){
        getRecentActivity(totalRecords);

    }
});

function getRecentActivityClick(event)
{
    if (event != null){
            disabledEventPreventDefault(event);
        }
        getRecentActivity(totalRecords);
}

var totalRecords=''；
$（文档）.ready（函数（）{
getRecentActivity（totalRecords）；
});
$（“.hd ui活动li a”）。单击（函数（e）{
e、 预防默认值（）；
var tabid=$（this.parent（）.attr（'data-tab-id'）；
if（tabid==“self”）{
getRecentActivity（totalRecords）；
}
});
函数getRecentActivityClick（事件）
{
如果（事件！=null）{
disabledEventPreventDefault（事件）；
}
getRecentActivity（totalRecords）；
}

home.js：

function getRecentActivity(totalRecords)
{
$.ajax({
        url:baseUrl + "activity/activityfeed",
        data:{'total':totalRecordsView},
        dataType:"json",
        type:"POST",
        success:function(data){

 var activityHtml = '<p>Hello</p>';
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);


}
});

}

函数getRecentActivity（totalRecords） { $.ajax({ url:baseUrl+“活动/activityfeed”， 数据：{'total'：totalRecordsView}， 数据类型：“json”， 类型：“POST”， 成功：功能（数据）{ var activityHtml='Hello

'； $（“#活动提要li[数据段id=near_you].模块列表”）.append（activityHtml）； } }); } 更新：

---

jshiddle:

根据我从你的问题中了解到的。。我认为自从你使用<代码>附加（）。。 使用

html（）

append（）将参数指定的内容插入到匹配元素集中每个元素的末尾

html（）用于设置元素的内容，该元素中的任何内容都将被新内容完全替换

试试这个

替换

$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);

与

您可以这样做：

 $('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
 // here you are appending the fulldata just apply some css here

以这种方式使用css：

$('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'300px','overflow':'hidden'})
    .append(activityHtml);

然后单击loadmore：

$('your load more button').toggle(function(){
   $('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'auto','overflow':'auto'})
    },function(){
   $('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'300px','overflow':'hidden'});
});

---

仍然没有解决当我点击标签，它仍然加载新的数据，它不应该加载数据，直到用户点击加载更多按钮在底部..它不清楚你是轮胎得到。。。你正在加载

$（document）.ready（function（）{…

）中的内容。这就是为什么你要在单击之前获取数据。你能为此创建提琴吗？你的“查看更多”按钮在哪里？我找不到它…这是我的更新提琴。。。。

$('your load more button').toggle(function(){
   $('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'auto','overflow':'auto'})
    },function(){
   $('#activity-feed li[data-section-id=near_you] .module-list')
    .css({'height':'300px','overflow':'hidden'});
});