HTML分页的效果实现
HTML分页的效果实现
想实现图片中的效果.点的时候是蓝色,没点的时候的灰色.什么方法都可以...最好是JQ or JS,,谢谢
[img]http://dl.iteye.com/upload/picture/pic/80852/c488fe74-98e5-36c5-91e5-010ae3ee0c36.jpg[/img]
通常情况下这是css中的解决方法。
给你个测试页：
(在此之前建议楼主下载苏沈小雨的CSS样式表，如果楼主打算长期做网页的话)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
/*说明：color:blue;表示蓝色。*/
a{margin:0 5px;text-decoration:none;}
a:link{color:gray;}/*链接*/
a:visited{color:gray;}/*己经访问过的链接*/
a:hover{color:blue;}/*当鼠标停在链接上时的样式*/
a:active{color:blue;}/*当链接正在被点击时的样式*/
</style>
</head>
<body>
<a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#ref {height: 27px;width: 728px;}
#ref #zuo {width: 69px;float: left;}
#ref #zuo a{display: block;width: 69px;height: 27px;text-decoration: none;background-image: url(1.jpg);background-position: -2px 0px;}
#ref #zhong a {text-decoration: none;display: block;height: 27px;width: 16px;float: left;margin-right: 3px;margin-left: 3px;background-image: url(1.jpg);background-position: -70px 1px;background-repeat: no-repeat;}
#ref #zhong a:hover{background-image: url(1.jpg);background-repeat: no-repeat;background-position: -98px 1px;}
body {font-family: "新宋体";font-size: 12px;text-align: center;}
#ref #zhong {float: left;}
#ref #you {float: left;width: 69px;}
#ref #you a {display: block;height: 27px;width: 69px;background-image: url(1.jpg);text-decoration: none;background-position: 55px 0px;}
-->
</style>
</head>
<body>
<div align="center">
<div id="ref">
<div id="zuo"><a href="?page=1"> </a></div>
<div id="zhong">
<a href="?page=1" id="1"> </a>
<a href="?page=2" id="2"> </a>
<a href="?page=3" id="3"> </a>
<a href="?page=4" id="4"> </a>
<a href="?page=5" id="5"> </a>
<a href="?page=6" id="6"> </a>
<a href="?page=7" id="7"> </a>
<a href="?page=8" id="8"> </a>
<a href="?page=9" id="9"> </a>
<a href="?page=10" id="10"> </a>
</div>
<div id="you"><a href="?page=10"> </a></div>
</div>
</div>
<script language="javascript">
<!--
var page=document.URL;
var fen=page.split("?");
var id=fen[1].split("=");
document.write("点击第"+id[1]+"页，链接变成了蓝色！");
document.getElementById(id[1]).style.backgroundPosition="-98px 1px";
//-->
</script>
</body>
</html>
楼上说得很对，确实是用css去设置，只是我这里有点不同：
我没有你的图片，就用了你上传的图片做背景，鼠标经过时用改变背景图片水平和垂直位置来达到变蓝色的效果，点击后，用js获取分页号（比如page=1，窃取后面的1），然后给和id号和js获取到的分页号相同的链接定义背景图片位置，达到点击过后，那个连接也是蓝色的（就是鼠标移开后还是保持蓝色，当然，前提是你得为每一个连接加一个不同的id号，比如 <a href="?page=1" id="1"> </a> <a href="?page=2" id="2"> </a>）也就是在哪一页，那一页相对的页码背景是蓝色的！
HTML分页的效果实现相关推荐
- 动态分页展示效果（纯JavaScript编写，值得学习）
动态分页展示效果(纯JavaScript编写,值得学习) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- vue基于饿了么的表格和分页交互效果
前面有提到在vue里面,对于表格的使用:vue2.0 + element-ui 实战项目-渲染表格(四)https://www.jianshu.com/p/fea8cacc04b9,在实战的过程中,往 ...
- php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
- 原生js实现分页的效果
想必大家都用过百度查找过我们想要的信息,每次我们查找东西的时候,百度都会返给我们很多很多相似和有关的结果,而这些结果是不可能一页就显示完全的,一般都会分很多很多页,效果图如下.所以我们今天就是要分享一 ...
- java poi excel 视图-分页浏览 效果
今天接了个需求,要求导出excel的时候excel默认显示为分页浏览(分页视图模式) 发现HSSFSheet 和HSSFWorkbook 相关的api不支持(没有找到相关方法),上网查了一圈总结如下: ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
http://chamcon.iteye.com/blog/1986607 转载于:https://www.cnblogs.com/xieyunc/p/9126527.html
- 如何用php实现分页效果
分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果 首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...
- ie8 object param没有效果_如何用php实现分页效果
分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果 首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...
- paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelp ...
最新文章
- python snap7 简书_SnapKit真好用
- nrf52840开发套件_nRF52840蓝牙5.0模块有几个突出的优势
- shell脚本修复MySQL主从同步
- vue前端 html,Vue.js v-html
- python 发邮件 timeout_python发送邮件
- 电脑运行adb闪退_adb命令调试工具
- VTK：Utilities之GetDataRoot
- Linux磁盘管理与文件系统（实验详解，一看就懂）
- 苹果Apple Music正式登陆索尼PS5
- 为什么用python画图_为什么使用Matplotlib绘图太慢？
- Android事件传递机制【Touch事件】
- CSS 控制滚动条样式
- 如何用Python的标准print函数打印一个彩色的围棋局面？
- 文本摘要 ACL2021
- 解除RAR和ZIP压缩包密码的不同方法
- deepin 开启root权限
- cursor游标讲解
- 可视化——Excel2进阶
- 帝国cms cj1.php,帝国cms源码中常用函数所在位置
- 构建基于Jenkins + Github的持续集成环境