0

我有以下 jquery 代码，它从头到尾显示页面。问题是我无法创建活动按钮。例如，如果我正在查看第 4 页，则第 4 页以不同的颜色向用户显示当前选择了第 4 页。

(function($){
   $.fn.customPaginate = function(options)
   {
       var paginationContainer = this;
       var itemsToPaginate;

       var defaults = {
            itemsPerPage : 5
       };

       var settings = {};
       $.extend(settings, defaults, options);
       var itemsPerPage = settings.itemsPerPage;

       itemsToPaginate = $(settings.itemsToPaginate);
       var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length / itemsPerPage));

       $("<ul></ul>").prependTo(paginationContainer);

       for(var index = 0; index < numberOfPaginationLinks; index++)
       {
            paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>");
       }

       itemsToPaginate.filter(":gt(" + (itemsPerPage - 1)  + ")").hide();

       paginationContainer.find("ul li").first().addClass(settings.activeClass).end().on('click', function(){

           var $this = $(this);
           $this.addClass(settings.activeClass);
           $this.siblings().removeClass(settings.activeClass);

           var linkNumber = $this.text();
           var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage)  + ")");
            $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1)  + ")"));
            itemsToHide.hide();

            var itemsToShow = itemsToPaginate.not(itemsToHide);
            itemsToShow.show();
       });   
   }
 }(jQuery));
4

2 回答 2

1

只需添加： $('li').attr('class', ''); $(this).attr('class', 'active');

后 ： var linkNumber = $(this).text();

在 onclick 函数中。

于 2015-05-11T14:44:39.663 回答
0

当您在活动页面上时，您将一个活动类添加到活动的 li 中。只要给活跃的班级适当的风格。

//如果您需要进一步的帮助，请创建一个 jsfiddle

于 2013-07-06T13:27:14.290 回答