我有分頁,單擊它時我不知道如何激活下一個/上一個圖示。目前,如果我點擊數字,它會顯示相應的頁面。請幫助在單擊下一個和上一個按鈕時顯示頁面,以及如果頁面分別位于第一頁和最后一頁,如何禁用下一個和上一個圖示。請幫忙。下面是我的代碼
$(document).ready(function() {
pageSize = 2;
showPage = function(page) {
$(".content").hide();
$(".content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
});
.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 400px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
<ul id="pagin">
<li id="prev"><a class="" href="#"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg></a></li>
<li><a class="current" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li id="next"><a class="" href="#"><svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a></li>
</ul>
uj5u.com熱心網友回復:
要根據當前頁面啟用/禁用#prev和鏈接,您可以在函式中執行檢查,該函式向它們添加一個設定.#nextshowPagepointer-events: none
還要注意使用slice()代替顯式回圈來隱藏/顯示.content與當前頁面相關的元素。
更新:
單擊下一個和上一個按鈕時,我將如何顯示相應的頁面
為此,請更改您的邏輯,以便設定頁面的功能也更新 UI - 即。活動頁面按鈕,以及 prev/next 的禁用狀態。從那里您唯一需要記錄的是當前頁碼,以便您可以在單擊 prev/next 時遞增/遞減它,我已經使用data()容器上的屬性將其.content傳遞給元素,并將其傳遞給設定活動頁面的函式。
試試這個:
jQuery($ => {
let pageSize = 2;
let pageCount = Math.ceil($('.content').length / 2);
let $pageContainer = $('.page-container');
let $pageLinks = $('#pagin li a.page');
let $prev = $('#prev');
let $next = $('#next');
let currentPage = $pageContainer.data('page');
let setActivePage = page => {
let start = pageSize * (page - 1);
let end = pageSize * page;
$(".content").hide().slice(start, end).show();
$('#prev').toggleClass('disabled', page <= 1);
$('#next').toggleClass('disabled', page >= pageCount);
$pageLinks.removeClass("current");
$pageLinks.eq(page - 1).addClass('current');
$pageContainer.data('page', page);
}
setActivePage(currentPage);
$pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
$prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
$next.on('click', e => setActivePage($pageContainer.data('page') 1));
});
.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 400px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a.disabled {
pointer-events: none;
opacity: 0.4;
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
</div>
<ul id="pagin">
<li>
<a href="#" id="prev">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg>
</a>
</li>
<li><a class="page current" href="#">1</a></li>
<li><a class="page" href="#">2</a></li>
<li><a class="page" href="#">3</a></li>
<li><a class="page" href="#">4</a></li>
<li><a class="page" href="#">5</a></li>
<li><a class="page" href="#">6</a></li>
<li><a class="page" href="#">7</a></li>
<li><a class="page" href="#">8</a></li>
<li>
<a href="#" id="next">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a>
</li>
</ul>
uj5u.com熱心網友回復:
單擊下一個和上一個按鈕。它沒有給出文本值,而是在其錨標記中有圖示。因此它突出顯示按鈕和 showPage(parseInt($(this).text())) 函式不起作用
以下是根據您的代碼所需的更改
$(document).ready(function() {
pageSize = 2;
showPage = function(page) {
$(".content").hide();
$(".content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").click(function() {
let selectedPage = $("#pagin li a.current").parent().index();
$("#pagin li a").removeClass("disable");
$("#pagin li a").removeClass("current");
if($(this).parent().is('#next')) {
showPage(selectedPage 1)
$("#pagin li").eq(selectedPage 1).children('a').addClass("current");
} else if($(this).parent().is('#prev')) {
showPage(selectedPage - 1)
$("#pagin li").eq(selectedPage -1).children('a').addClass("current");
} else {
$(this).addClass("current")
showPage(parseInt($(this).text()))
}
if($("#pagin li a.current").parent().index() == 1) {
$('#prev a').addClass('disable');
}
if($("#pagin li a.current").parent().index() == 8) {
$('#next a').addClass('disable');
}
});
});
.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 400px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
.disable {
pointer-events: none;
cursor: not-allowed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
<ul id="pagin">
<li id="prev"><a class="disable" href="#"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg></a></li>
<li><a class="current" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li id="next"><a class="" href="#"><svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a></li>
</ul>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/476670.html
