如何在index.html与page2.html两个独立HTML文件中实现分页跳转？

当然没问题！这是个非常基础且常见的需求，只需要给两个页面添加结构一致的分页组件，并给按钮设置正确的跳转链接就搞定了。我给你一步步拆解实现过程：

1. 统一的分页组件逻辑 #

核心思路是：两个页面使用完全相同结构的分页导航，通过HTML的<a>标签的href属性指定跳转目标，同时给当前页面的按钮添加标识样式，让用户知道自己所处的位置。

2. 具体页面代码示例 #

index.html 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        /* 可选：给分页按钮添加基础样式，提升美观度 */
        .pagination {
            display: flex;
            gap: 8px;
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }
        .pagination a {
            padding: 8px 16px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #333;
            border-radius: 4px;
        }
        .pagination a.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
        .pagination a:hover:not(.active) {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>首页内容区域</h1>
    <!-- 分页导航组件 -->
    <ul class="pagination">
        <li><a href="index.html" class="active">1</a></li>
        <li><a href="page2.html">2</a></li>
    </ul>
</body>
</html>

这里的关键是第二个按钮的href="page2.html"——因为两个文件在同一目录下，直接写文件名就能实现跳转。同时给当前页的按钮加上active类，标记用户当前位置。

page2.html 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第二页</title>
    <style>
        /* 和index.html完全一致的分页样式 */
        .pagination {
            display: flex;
            gap: 8px;
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }
        .pagination a {
            padding: 8px 16px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #333;
            border-radius: 4px;
        }
        .pagination a.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
        .pagination a:hover:not(.active) {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>第二页内容区域</h1>
    <!-- 分页导航组件，注意active类切换到第二页 -->
    <ul class="pagination">
        <li><a href="index.html">1</a></li>
        <li><a href="page2.html" class="active">2</a></li>
    </ul>
</body>
</html>

这个页面的分页结构和首页完全一致，仅调整了active类的位置，同时第一个按钮的href指向index.html，实现返回首页的功能。

3. 优化小技巧 #

如果后续分页按钮增多，或者想避免重复写CSS样式，可以把分页样式单独提取到一个公共CSS文件中：

1. 创建pagination.css文件，写入所有分页相关样式
2. 在两个页面的<head>中引入这个文件：

<link rel="stylesheet" href="pagination.css">

这样后续修改样式时，只需要维护一个文件即可，效率更高。

内容的提问来源于stack exchange，提问作者Anil Rana