使用javascript的动态HTML分页

我有以下分页控件

index.html中的代码（初始状态）：

然后在函数中，我根据用户单击的内容生成页面列表

function generateUL(minPage, maxPage, newActivePage){
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";

    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    {
        if( pageIdx == newActivePage) { 
            innerHtml += "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        }
        else{
            innerHtml += "<li><a href=\"#previous_section\">" + pageIdx + "</li>";
        }
    }
    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;
}

函数generateUL（minPage、maxPage、newActivePage）{
var innerHtml=“
”；
对于（var pageIdx=minPage；pageIdx而言，结果HTML具有不同的ID（“插曲分页”），因此CSS可能不同。
当涉及到代码本身而不是“#上一节”时，我会使用“数据页”或类似的方法，如下所示：

<ul id="episode_paging">
    <li><a data-prev="1" href="#">&lt;</a></li>
    <li id="active_page" class="active"><span>1</span></li>
    <li><a href="#" data-page="2">2</a></li>
    <li><a href="#" data-page="3">3</a></li>
    <li><a href="#" data-page="4">4</a></li>
    <li><a href="#" data-page="5">5</a></li>
    <li><a data-next="1" href="#">&gt;</a></li>
</ul>
<script>
    var inputElem = document.getElementById("episode_paging").getElementsByTagName("a");
    for (var i = 0; i < inputElem.length; i++) {

        inputElem[i].addEventListener('click', function () {
            if (this.getAttribute("data-page"))
                alert(this.getAttribute("data-page"));
        }, false);
    }
</script>



1






var inputElem=document.getElementById（“插曲分页”）.getElementsByTagName（“a”）；
对于（变量i=0；i
只需使用类似css的

.page_paging li {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

对于您的功能，我希望这样做

function generateUL(minPage, maxPage, newActivePage){
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";
    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    {

        if( pageIdx == newActivePage) { 
            var liElement = "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        }
        else{
            var liElement = "<li><a href=\"#previous_section\" >" + pageIdx + "</li>";
        }
        innerHtml += liElement;
    }

    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;
}

函数generateUL（minPage、maxPage、newActivePage）{
var innerHtml=“
”；
对于（var pageIdx=minPage；pageIdx示例CSS:

#episode_paging li {
    padding: 0 2px !important;
}

#episode_paging li a {
    padding: 0 2px !important;
}

“插页”从我的代码到stackoverflow的“复制粘贴”错误。这两个代码都具有相同的id，我在问题中编辑了代码。至于数据页与href到上一个\u部分，一旦用户单击其中一个项目，页面将滚动到上一个\u部分，因此必须保持原样。至于代码，同意。CSS没有更改任何内容：（试着在css中输入！重要信息
.page_paging li {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

function generateUL(minPage, maxPage, newActivePage){
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";
    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    {

        if( pageIdx == newActivePage) { 
            var liElement = "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        }
        else{
            var liElement = "<li><a href=\"#previous_section\" >" + pageIdx + "</li>";
        }
        innerHtml += liElement;
    }

    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;
}

#episode_paging li {
    padding: 0 2px !important;
}

#episode_paging li a {
    padding: 0 2px !important;
}