Question

我有以下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));

Answer 1

当您在活动页面上时，您将活动类添加到活动的li。只需为活动类提供适当的样式。

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

jquery分页添加活动按钮

1 个答案: