因为项目遇到的需要多页显示的内容,需要做出页面跳转的功能,考虑到以后会经常遇到,于是封装了一个demo可以直接使用。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div class="mu-page-all">
<!-- ul可换成其他标签,也可在外层套多几层标签 -->
<ul class="mu-page-detail">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="mu-page-detail hide">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul class="mu-page-detail hide">
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
<ul class="mu-page-detail hide">
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<!-- 这个按钮元素必须严格按照该种写法 -->
<div>
<button class="mu-page-pre" onclick="muPagePre(event)">上一页</button>
<!-- 页数需要跟当前显示页面相匹配 -->
<span class="mu-page-num">1/4</span>
<button class="mu-page-next" onclick="muPageNext(event)">下一页</button>
</div>
</div>
<script>
<!-- 跳转上一页 -->
function muPagePre(event) {
var pre = event.target;
var detail = pre.parentNode.parentNode.getElementsByClassName('mu-page-detail');
var num = pre.parentNode.parentNode.getElementsByClassName('mu-page-num')[0];
let numNow = num.innerHTML.match(/\d+/g)[0]; //文本当前页数,设置为文本的第一个数字,可根据实际情况更改
if (numNow != 1) {
let pageNum = numNow - 1;
num.innerHTML = pageNum + '/' + detail.length; //文本编辑,可根据实际情况更改
detail[pageNum].classList.add('hide');
detail[pageNum - 1].classList.remove('hide');
}
}
<!-- 跳转下一页 -->
function muPageNext(event) {
var pre = event.target;
var detail = pre.parentNode.parentNode.getElementsByClassName('mu-page-detail');
var num = pre.parentNode.parentNode.getElementsByClassName('mu-page-num')[0];
let numNow = num.innerHTML.match(/\d+/g)[0]; //文本当前页数,设置为文本的第一个数字,可根据实际情况更改
if (numNow != detail.length) {
let pageNum = parseInt(numNow) + 1;
num.innerHTML = pageNum + '/' + detail.length; //文本编辑,可根据实际情况更改
detail[numNow].classList.remove('hide');
detail[pageNum - 2].classList.add('hide');
}
}
</script>
</body>
</html>