html翻页按钮怎么写,CSS实现的一个漂亮分页按钮样式

CSS实现的一个漂亮分页按钮样式

.pagination{

overflow:hidden;

margin:0;

padding:10px 10px 6px 10px;

border-top:1px solid #f60;

_zoom:1;

}

.pagination *{

display:inline;

float:left;

margin:0;

padding:0;

font-size:12px;

}

.pagination i{

float:none;

padding-right:1px;

}

.currentPage b{

float:none;

color:#f00;

}

.pagination li{

list-style:none;

margin:0 5px;

}

.pagination li li{

position:relative;

margin:-2px 0 0;

font-family: Arial, Helvetica, sans-serif

}

.firstPage a,.previousPage a,.nextPage a,.lastPage a{

overflow:hidden;

height:0;

text-indent:-9999em;

border-top:8px solid #fff;

border-bottom:8px solid #fff;

}

.pagination li li a{

margin:0 1px;

padding:0 4px;

border:3px double #fff;

+border-color:#eee;

background:#eee;

color:#06f;

text-decoration:none;

}

.pagination li li a:hover{

background:#f60;

border-color:#fff;

+border-color:#f60;

color:#fff;

}

li.firstPage{

margin-left:40px;

border-left:3px solid #06f;

}

.firstPage a,.previousPage a{

border-right:12px solid #06f;

}

.firstPage a:hover,.previousPage a:hover{

border-right-color: #f60;

}

.nextPage a,.lastPage a{

border-left:12px solid #06f;

}

.nextPage a:hover,.lastPage a:hover{

border-left-color:#f60;

}

li.lastPage{

border-right:3px solid #06f;

}

li li.currentState a{

position:relative;

margin:-1px 3px;

padding:1px 4px;

border:3px double #fff;

+border-color:#f60;

background:#f60;

color:#fff;

}

li.currentState,.currentState a,.currentState a:hover{

border-color:#fff #ccc;

cursor:default;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页是 Web 开发中常见的功能之一,它可以将大量的数据分成多页进行显示,方便用户查看和操作。在分页中,我们通常需要实现点击页码跳转到对应页的功能,下面是一个实现分页点击跳转的详解。 1. HTML 结构 首先,我们需要在 HTML 中构建分页的基本结构,例如: ```html <div class="pagination"> <a href="#" class="prev"><</a> <a href="#" class="page">1</a> <a href="#" class="page">2</a> <a href="#" class="page">3</a> <a href="#" class="next">></a> </div> ``` 其中,`.pagination` 是分页的容器,`.prev` 和 `.next` 分别表示上一页和下一页的按钮,`.page` 表示页码按钮。 2. CSS 样式 接着,我们需要为分页添加一些样式,例如: ```css .pagination { display: flex; justify-content: center; align-items: center; } .pagination a { display: inline-block; margin: 0 5px; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; text-decoration: none; color: #333; } .pagination a.prev, .pagination a.next { font-weight: bold; } .pagination a.current { background-color: #333; color: #fff; } ``` 其中,我们使用了 Flex 布局来居中显示分页按钮,为按钮添加了一些基本样式,如边框、圆角、文本对齐等。我们还使用了 `.current` 类来表示当前页码的按钮。 3. JavaScript 实现 最后,我们需要使用 JavaScript 实现分页点击跳转的功能。我们可以为每个页码按钮添加一个点击事件监听器,当用户点击某个页码按钮时,我们就获取该按钮的页码值,并将该值传递给后端,后端返回对应页的数据,我们再将数据渲染到页面上。 ```javascript var pagination = document.querySelector('.pagination'); var pages = pagination.querySelectorAll('.page'); var prevBtn = pagination.querySelector('.prev'); var nextBtn = pagination.querySelector('.next'); var currentPage = 1; // 当前页码 // 点击页码按钮 pages.forEach(function(page) { page.addEventListener('click', function() { var pageNum = parseInt(page.innerText); if (pageNum !== currentPage) { currentPage = pageNum; getData(currentPage); // 获取并渲染数据 } }); }); // 点击上一页和下一页按钮 prevBtn.addEventListener('click', function() { if (currentPage > 1) { currentPage--; getData(currentPage); // 获取并渲染数据 } }); nextBtn.addEventListener('click', function() { if (currentPage < pages.length) { currentPage++; getData(currentPage); // 获取并渲染数据 } }); // 获取并渲染数据 function getData(pageNum) { // 发送 AJAX 请求获取数据 // ... // 渲染数据 // ... } ``` 在上面的代码中,我们为每个页码按钮添加了一个点击事件监听器,当用户点击某个页码按钮时,我们获取该按钮的页码值,并将该值传递给 `getData` 函数。在 `getData` 函数中,我们使用 AJAX 发送请求,获取对应页的数据,并将数据渲染到页面上。 此外,我们还为上一页和下一页按钮添加了点击事件监听器,实现翻页功能。 总结 以上就是实现分页点击跳转的详解,我们需要在 HTML 中构建分页的基本结构,在 CSS 中为分页添加样式,在 JavaScript 中实现点击页码跳转的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值