js实现分页导航

最新推荐文章于 2023-03-29 14:48:54 发布

原创

最新推荐文章于 2023-03-29 14:48:54 发布 · 969 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

本文介绍了如何使用JavaScript实现简单的分页导航。首先创建带有isPages类的div盒子，然后设置样式使其默认隐藏。接着创建导航栏，包含静态按钮和动态页码区域。通过JavaScript动态生成页码并设置点击事件，实现页面切换。最后提供了可直接使用的分页导航代码。

今天写了一个简单的导航栏

实现后的效果如下图

首先来写一下思路实现步骤：

第一步：先创建 x 个 div 盒子，并为所有的盒子绑定相同的class属性，我这里绑定的是 isPages，盒子内可以写任意内容。x 为最终结果显示的页数。

第二步：设置 div 盒子 css 样式，将 isPages 设置为隐藏，使用 display 属性设置为 none。盒子内的内容根据自己喜好进行设置。

第三步：创建导航，先创建一个 div 盒子，盒子内用于存放导航操作按钮，把固定不变的按钮先放入盒子中，再在盒子中创建一个盒子，用于存放动态的页码。

第四步：开始编写脚本，需要将页码的总数和当前页面所在位置搞明白。还需要理顺代码的运行顺序。

脚本思路：

第一步：实现页码的显示，创建三个变量，1、需要同时显示的页码数量；2、存放动态页码 innerHTML 的代码；3、定义当前显示的第一个页码，这样就可以知道当前显示的所有页码；

第二步：利用循环创建动态页码，完成后创建导航固定按钮首页、上一页、下一页、尾页的点击事件，每触发一次点击事件更新第一步中的动态页码变量、页码位置变量；

第三步：创建动态导航页码点击事件。

下面直接上代码，复制即可使用。

导航代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			.isPages {
				display: none;
			}
			
			#isNavContent {
				margin: 0;
				padding: 10px;
			}
			#isNavContent li {
				list-style: none;
				float: left;
				display: block;
				text-align: center;
				width: 50px;
				height: 35px;
				line-height: 35px;
				color: #333333;
				border: 1px solid #DDDDDD;
				background-color: #F2F2F2;
				cursor: pointer;
			}
			#isNavContent li:hover {
				background-color: #0AB0F6;
				color: #F