我已经为演示目的制作了一个jsfiddle：https://jsfiddle.net/b8gmqx9p/2/
这是jQuery代码：
(function($){
$.fn.customPaginate = function(options)
{
var paginationContainer = this;
var itemsToPaginate;
var defaults = {
itemsPerPage : 3
};
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").on('click', function(){
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("300");
$(this).addClass('pagination_active').siblings().removeClass('pagination_active');
});
} }(jQuery)); (function($){
$(document).ready(function(){
$(".pagination").customPaginate({
itemsToPaginate : ".pagination_show"
});
}); })(jQuery)
我想在顶部和底部都有导航栏，我希望这两个元素都能显示活动页面。目前，它并未显示您最初打开网站时第一页处于活动状态（或查看演示）。单击“2”时，它应该变为黄色。但是，当您最初打开网站时，我希望将类设置为“1”。我想在底部和顶部导航中显示。
其次，
我想在导航栏中添加一个“上一个”和“下一个”按钮，该按钮应该包含一个功能，可以移动到下一个（例如从第2页到第3页）或移动到上一页（例如从第3页到第2页。
感谢您的帮助！我对jQuery并不擅长......
答案 0 :(得分：0)
此示例将帮助您http://web.enavu.com/tutorials/making-a-jquery-pagination-system/。你可以看到演示并可以下载
如果要设置选择的第一页，则必须使用
for(var index = 0; index < numberOfPaginationLinks; index++)
{
if(index==0)
{
paginationContainer.find("ul").append("<li class='pagination_active'>"+ (index+1) + "</li>");
}
else
{
paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>");
}
}
In the line 20 of your js
答案 1 :(得分：0)
这是你想要的 -
( function($) {
$.fn.customPaginate = function(options) {
var paginationContainer = this;
var itemsToPaginate;
var defaults = {
itemsPerPage : 3
};
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 pagerEle=0; pagerEle<paginationContainer.length; pagerEle++){
for (var index = 0; index < numberOfPaginationLinks; index++) {
paginationContainer.eq(pagerEle).find("ul").append("<li>" + (index + 1) + "</li>");
if(index == 0){
paginationContainer.eq(pagerEle).find("ul li").eq(0).addClass('pagination_active');
}
}
}
itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide();
paginationContainer.find("ul li").on('click', function(e) {
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("300");
$(this).addClass('pagination_active').siblings().removeClass('pagination_active');
pagerCurIndex = $(this).index();
for(var pagerEle=0; pagerEle<paginationContainer.length; pagerEle++){
paginationContainer.eq(pagerEle).find("ul li").eq(pagerCurIndex).addClass('pagination_active').siblings().removeClass('pagination_active');
}
});
}
}(jQuery));
(function($) {
$(document).ready(function() {
$(".pagination").customPaginate({
itemsToPaginate : ".pagination_show"
});
});
})(jQuery)ul.products_erweitert li {
width: 221px;
margin-right: 0.5%;
margin-left: 0.5%;
margin-bottom: 0.4%;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}
.asa2_uhrenshop_main_container {
border: 1px solid #fff;
padding: 10px 10px 10px 10px; margin-bottom: 8px;
-moz-border-radius: 5px;
border-radius: 5px;
height:350px;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
-moz-box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
.asa2_uhrenshop_main_container:hover {
border: 1px solid #db9f1e;
-moz-border-radius: 5px;
border-radius: 5px;
transition: all 0.5s;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
.also_a_test {
background-color:#00CD00;
}
.best_test {
background-color:#8A2BE2
}
.pagination li
{ display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 16px;
line-height: 22px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #000;
border: 1px solid #db9f1e !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 3px;
}
.pagination li:hover
{
background: #db9f1e;
border-color: #db9f1e !important;
color: #fff !important;
transition: all 0.5s;
}
.pagination_active {
background: #db9f1e;
border-color: #db9f1e !important;
color: #fff !important;
}
.pagination ul
{
border: 0px;
padding: 0px;
}
.pagination {
margin: 0 auto;
display: table;
float: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="pagination"></div>
<ul class="products_erweitert"><li class="pagination_show"><div class="asa2_uhrenshop_main_container"> This is a test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container"> This is a test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container"> This is a test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container also_a_test"> This is also a test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container also_a_test"> This is also a test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container also_a_test"> This is also a test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container best_test"> This is the best test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container best_test"> This is the best test</div>
</li>
<li class="pagination_show">
<div class="asa2_uhrenshop_main_container best_test"> This is the best test</div>
</li>
</ul><div class="pagination"></div>