日期:2014-05-17  浏览次数:20591 次

HTML分页的效果实现
HTML分页的效果实现

想实现图片中的效果.点的时候是蓝色,没点的时候的灰色.什么方法都可以...最好是JQ or JS,,谢谢





通常情况下这是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获取到的分页号相同的链接定义背景图片位置,达到点击过后,那个连接也是蓝色的(就是鼠标移开后还是保持蓝色,当然,前提是你得为每一个连接加一个不同的