时间戳

首页 > 解决方案 > 使用 javascript 的动态 HTML 分页

javascript - 使用 javascript 的动态 HTML 分页

问题描述

我有以下分页控件 初始状态

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

<ul id="page_paging">
    <li><a href="#previous_section">&lt;</a></li>
    <li id= "active_page" class="active"><span>1</span></li>
    <li><a href="#previous_section">2</a></li>
    <li><a href="#previous_section">3</a></li>
    <li><a href="#previous_section">4</a></li>
    <li><a href="#previous_section">5</a></li>
    <li><a href="#previous_section">&gt;</a></li>
</ul>

在javascript中我附加了一个事件监听器：

document.getElementById("page_paging").addEventListener("click", LoadPages);

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

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;
}

尽管返回的 html 看起来与初始状态“原始的”完全相同 - 控件失去了圆圈之间的空间

结果html：

<ul id="page_paging">
    <li><a href="#previous_section">&lt;</a></li>
    <li id="active_page" class="active"><span>1</span></li>
    <li><a href="#previous_section">2</a></li>
    <li><a href="#previous_section">3</a></li>
    <li><a href="#previous_section">4</a></li>
    <li><a href="#previous_section">5</a></li>
    <li><a href="#previous_section">&gt;</a></li>
</ul>

以及控件的外观 在此处输入图像描述

有没有人知道为什么会发生这种情况以及如何解决它？

标签： javascriptpaginationhtml-listscode-generationdynamic-html

解决方案

示例 CSS：

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

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

推荐阅读