本文介绍如何使用JavaScript实现静态数据的自动分页功能。通过定义CSS隐藏所有数据列表，利用JS动态计算总页数并生成分页控件，实现点击切换显示指定页码内容的效果，适用于无需后端交互的纯前端数据分页场景。
静态分页实现原理与代码结构
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>静态分页(首尾页)www.jb51.net</title> </head> <body> <style> ul {display:none} </style> <div id="mydiv"> <ul> <li>01</li> </ul> <ul> <li>02</li> </ul> <ul> <li>03</li> </ul> <ul> <li>04</li> </ul> <ul> <li>05</li> </ul> <ul> <li>06</li> </ul> <ul> <li>07</li> </ul> <ul> <li>08</li> </ul> <ul> <li>09</li> </ul> <ul> <li>10</li> </ul> <ul> <li>11</li> </ul> <ul> <li>12</li> </ul> <ul> <li>13</li> </ul> <ul> <li>14</li> </ul> <ul> <li>15</li> </ul> <ul> <li>16</li> </ul> <ul> <li>17</li> </ul> <ul> <li>18</li> </ul> <ul> <li>19</li> </ul> <ul> <li>20</li> </ul> </div> <div id="changpage"></div> </body> </html> 注意：若引入外部JavaScript文件，操作后需刷新页面方可生效。