Question

我试图将类激活添加到我的分页中，目的是让用户知道他们正在查看哪个页码。但是，它似乎没有正常工作。

任何人都有任何想法？

我使用php创建了pagnation。

echo"<div align='center'>  
        <ul class='pagination'>";
        for ($i = 1; $i < count($productArr[$catCode]) / 4 + 1; $i++) {
            echo"<li><a href='collectionPage.php?cat={$catCode}&page={$i}'> {$i}</a></li>
         ";
        }

        echo"<li><a href='collectionSummary.php?cat={$catCode}'>view all</a></li>";

        echo"</ul>
        </div>";

我使用的功能

$(document).ready(function () {
            var pageItem = $(".pagination li");

            pageItem.click(function () {
                pageItem.removeClass("active");
                $(this).addClass("active");
            });

        });

Answer 1

当用户点击链接时，您正在使用javascript修改页面。这可能会工作几毫秒，但是当在新链接上重新加载页面时，前一页加载的任何内容都将丢失。（这是正确的，除非你通过AJAX加载页面，并且有一个“ajaxify”插件或某些东西来防止链接正常工作，但我怀疑是这样的吗？）

您要做的是让服务器端代码在首次呈现页面时设置为“活动”类。有点像：

$currentPage = 3;
for ($i = 1; $i < count($productArr[$catCode]) / 4 + 1; $i++) {
    $activeOrNotClass = "";
    if ($i == $currentPage)
        $activeOrNotClass = "active";
    echo"<li class='" + $activeOrNotClass + "' ><a href='collectionPage.php?cat={$catCode}&page={$i}'> {$i}</a></li>";
}

（显然，您必须根据需要设置$ currentPage的值）

Answer 2

点击必须转移到a标记。

尝试这样的事情：

var pageItem = $(".pagination li");

pageItem.on('click', 'a', function () {
    pageItem.removeClass("active");
    $(this).parent().addClass("active");
});

在此处查看示例JSFiddle：https://jsfiddle.net/q8de0nt1/

但是，当您正在加载另一个页面时，在重建分页菜单时，您必须通过PHP代码将“active”类添加到正确的<li>项目

Answer 3

尝试 on()

$(document).on("click",".pagination li",function () {
                $(this).removeClass("active");
               $(this).addClass("active");
            });

Answer 4

您可以通过监听父.pagination而不是单个li或元素来使用jquery中的委托事件，以及如何执行此操作：

  `// remove acitve class for all li
  $('.pagination').children('li').removeClass('active');
//add initial active class
$('.pagination').children('li').first().addClass('active');
$( ".pagination" ).on( "click", "li", function() {
var $this = $(this);
    $('.active').removeClass('active');
    $this.addClass("active");

});`

为什么我的.pagnation li添加活动不起作用？

4 个答案: