Discuz! 点击加载更多：基于 jQuery 的无刷新实现

在网站开发中，实现内容的动态加载是一个常见的需求。本文将介绍如何通过jQuery实现一个简单的“加载更多”功能，并确保代码结构清晰、易于维护，同时提供SEO友好的内容展示方式。
首先，我们需要引入jQuery库。这是实现动态效果的基础。请确保在HTML文件中正确引用jQuery：

接下来，我们定义HTML结构。这里假设有一组内容需要逐步展示，每个内容块用`

`表示。此外，还需要一个“加载更多”按钮来触发后续内容的显示。



        


        点我，阅读更多精彩内容……

为了确保页面初始加载时只显示部分内容，其余内容隐藏，我们可以通过CSS控制样式：


.Box {display: none;}

最后，启动插件以实现动态加载效果。以下是完整的JavaScript代码逻辑：


(function() {
    showItem(0, 13);
    var itemNum = 13; // 初始显示的个数
    jQuery('.more').click(function() {
        if (itemNum < 40) {
            showItem(itemNum, itemNum += 5);
        } else {
            location.href = 'portal.php?mod=list&catid=1';
        }
    });

    function showItem(fromindex, toindex) {
        var len = jQuery('.Box').length;
        for (var i = fromindex; i < toindex; i++) {
            if (i < len) {
                jQuery('.Box').eq(i).css('display', 'block');
            }
        }
    }
})();

### 注意事项 - `

` 的数量必须大于 `var itemNum = 13;` 的参数值，否则可能会出现未定义的行为。 - 如果内容总数少于设定的最大值（如40），可以调整条件判断逻辑以避免不必要的跳转或错误。通过以上步骤，您可以轻松实现一个具备“加载更多”功能的网页模块，既提升了用户体验，又保持了良好的SEO表现。记得根据实际需求调整参数和样式，使最终效果更加符合您的网站设计目标。
希望这篇文章对您有所帮助！如果您有任何疑问或需要进一步的帮助，请随时联系。

推荐阅读