专栏名称: 全栈修仙之路
专注分享 TS、Vue3、前端架构和源码解析等技术干货。
目录
相关文章推荐
今天看啥  ›  专栏  ›  全栈修仙之路

纯 CSS 实现分页!

全栈修仙之路  · 公众号  ·  · 2023-09-19 00:12
背景先看一下要实现的效果:分页.gif在静态页面实现分页效果,我们之前的思路一般都是使用HTML、CSS和JavaScript来实现分页,通过点击不同的分页导航,显示不同的内容。简单梳理一下采用JavaScript实现的思路:搭建静态页面给分页导航添加点击事件,点击时传入页码,设置要显示的内容结合当前页码,调用点击事件实现上一页、下一页效果部分实现代码如下:    ul class="pagination">        li>a href="#" onclick="showPage(1)">1a>li>        li>a href="#" onclick="showPage(2)">2a>li>            ul>    div class="content" id="page1">                p>这是第一页的内容。p>    div>    div class="content" id="page2">                p>这是第二页的内容。p>    div>    script>        function showPage(pageNumber) {            // 隐藏所有内容 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照