js实现翻页

最新推荐文章于 2024-08-13 15:07:27 发布

扶公瑾以苏

最新推荐文章于 2024-08-13 15:07:27 发布

阅读量7k

点赞数 3

分类专栏： javaScript 文章标签： js 翻页

本文链接：https://blog.csdn.net/qq_36470686/article/details/83155209

版权

本文介绍了如何使用JavaScript实现网页的翻页效果。通过展示实际的代码片段，讲解了关键的实现步骤和逻辑，帮助读者理解如何在网页中动态加载更多内容并实现分页导航。

摘要由CSDN通过智能技术生成

效果图：

代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style>
			.first{
				color:#666;
				display:inline-block;
				vertical-align:top;
				border:1px solid #e6e6e6;
				padding:5px 9px;
				font-size:12px;
			}
			#number{
				display:inline-block;
				vertical-align:top;
			}
			.num{
				color:#666;
				display:inline-block;
				vertical-align:top;
				border:1px solid #e6e6e6;
				padding:5px 9px;
				font-size:12px;
				margin-right:6px;
			}
			.current{
				color:#3e89fa;
				font-size:12px;
				display:inline-block;
				vertical-align:top;
				margin-left:30px;
				padding:5px 9px;
			}
			#inp{
				height:32px;
				width:32px;
			}
			.jump{
				display:inline-block;
				vertical-align:top;
				font-size:12px;
			}
			.l_jump{
				display:inline-block;
				vertical-align:top;
				padding:5px 9px;
				border:1px solid #e6e6e6;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<div class="first" id="home">首页</div>
			<div class="first" id="before">上一页</di