CSS中如何实现数据分页效果—纯CSS分页器设计

<div class="pagination-container">
    <div id="page1" class="page-content active">
        <h2>这是第一页的内容</h2>
        <p>这里放着一些关于第一页的文字，也许是产品介绍，或者博客文章的一部分。</p>
    </div>
    <div id="page2" class="page-content">
        <h2>这是第二页的内容</h2>
        <p>第二页通常承载着不同的信息，比如用户评论或者相关推荐。</p>
    </div>
    <div id="page3" class="page-content">
        <h2>这是第三页的内容</h2>
        <p>最后一页，也许是联系方式，或者更多内容的链接。纯CSS的限制在这里显得尤为明显。</p>
    </div>

    <nav class="pagination-nav">
        <a href="#page1">1</a>
        <a href="#page2">2</a>
        <a href="#page3">3</a>
    </nav>
</div>

.pagination-container {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #eee;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative; /* 确保内容可以绝对定位 */
    min-height: 200px; /* 避免内容切换时容器高度跳动 */
}

.page-content {
    display: none; /* 默认所有页面都隐藏 */
    position: absolute; /* 绝对定位，让所有页面重叠 */
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 60px; /* 为导航留出空间 */
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0; /* 用于过渡效果 */
    transition: opacity 0.3s ease-in-out;
}

/* 默认显示第一页，或通过URL hash决定 */
.page-content.active {
    display: block;
    opacity: 1;
}

/* 当URL hash匹配某个页面ID时，显示该页面 */
.page-content:target {
    display: block;
    opacity: 1;
}

/* 隐藏所有非当前目标页面 */
.page-content:target ~ .page-content:not(:target),
.page-content:target + .page-content:not(:target) {
    display: none;
    opacity: 0;
}

/* 如果没有target，则默认显示第一个页面 */
/* 这是一个稍微复杂但实用的技巧：如果URL中没有hash，或者hash不匹配任何页面，
   则第一个页面（或你指定的默认页面）会被显示。
   这里我们用body:not(:target)来表示没有匹配的target，然后结合兄弟选择器。
   但对于更复杂的情况，通常还是需要JavaScript来初始化默认显示。
   对于纯CSS，最直接的方式是让第一个页面默认就`display: block`，然后`:target`会覆盖它。
*/
.page-content:first-of-type {
    display: block; /* 默认显示第一个页面 */
    opacity: 1;
}

/* 当有 :target 存在时，覆盖默认显示 */
.page-content:target ~ .page-content:first-of-type {
    display: none;
    opacity: 0;
}


.pagination-nav {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: center;
}

.pagination-nav a {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s, color 0.2s;
}

.pagination-nav a:hover {
    background-color: #f0f0f0;
}

/* 导航链接的选中状态 */
/* 纯CSS下，导航链接的“选中”状态无法直接与当前显示的页面内容联动，
   因为它不能直接感知URL hash。通常需要JavaScript来添加active类。
   但我们可以通过`:focus`或者`:active`来模拟点击时的视觉反馈。
   这里我们不强制实现选中状态，因为这超出了纯CSS的合理范畴。
*/

<div class="checkbox-pagination-container">
    <input type="radio" id="tab1" name="tabs" checked class="tab-input">
    <input type="radio" id="tab2" name="tabs" class="tab-input">
    <input type="radio" id="tab3" name="tabs" class="tab-input">

    <div class="tab-labels">
        <label for="tab1">页面一</label>
        <label for="tab2">页面二</label>
        <label for="tab3">页面三</label>
    </div>

    <div class="tab-content-wrapper">
        <div class="tab-content" id="content1">
            <h3>Checkbox 分页内容 1</h3>
            <p>这是通过单选框切换的内容。这种方式在某些情况下比:target更灵活，因为不依赖URL hash。</p>
        </div>
        <div class="tab-content" id="content2">
            <h3>Checkbox 分页内容 2</h3>
            <p>每个内容块都与一个radio按钮关联。当radio被选中时，对应的内容块就会显示。</p>
        </div>
        <div class="tab-content" id="content3">
            <h3>Checkbox 分页内容 3</h3>
            <p>然而，这种方法同样有SEO和动态内容的限制。所有内容依然需要预加载。</p>
        </div>
    </div>
</div>

.checkbox-pagination-container {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #eee;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tab-input {
    display: none; /* 隐藏实际的radio按钮 */
}

.tab-labels {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.tab-labels label {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 5px;
    background-color: #f9f9f9;
    transition: background-color 0.2s, color 0.2s;
}

.tab-labels label:hover {
    background-color: #f0f0f0;
}

/* 当对应的radio被选中时，改变label的样式 */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"] {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.tab-content {
    display: none; /* 默认所有内容隐藏 */
    padding: 15px;
    border: 1px solid #eee;
    border-top: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 当对应的radio被选中时，显示其后面的内容 */
#tab1:checked ~ .tab-content-wrapper #content1,
#tab2:checked ~ .tab-content-wrapper #content2,
#tab3:checked ~ .tab-content-wrapper #content3 {
    display: block;
    opacity: 1;
}