html点击加载更多代码

在网页设计中，点击加载更多是一个很实用的功能，可以让网站内容分批次地加载，减轻页面负担，提高用户体验。下面是一个使用HTML实现点击加载更多的基础代码：

div id="content">
    p>
    这是第一批内容/p>
    p>
    这是第二批内容/p>
    p>
    这是第三批内容/p>
    p class="hidden">
    这是第四批内容/p>
    p class="hidden">
    这是第五批内容/p>
    p class="hidden">
    这是第六批内容/p>
    /div>
    button id="load-more">
    加载更多/button>
    script>
    var loadButton = document.getElementById("load-more");
    var hiddenSections = document.querySelectorAll("#content .hidden");
    var  numToShow = 3;
    var numToLoad = 3;
    var index = 0;
loadButton.addEventListener("click", function() {
    var elemsToShow = Array.prototype.slice.call(hiddenSections, index, index + numToShow);
elemsToShow.forEach(function(e) {
    e.classList.remove("hidden");
}
    );
    index += numToShow;
    if (index >
= hiddenSections.length) {
    loadButton.style.display = "none";
}
}
    );
    for (var i = 0;
     i

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！