HTML分页的成效实现
日期：2014-05-17 浏览次数：20668 次
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获取到的分页号相同的链接定义背景图片位置，达到点击过后，那个连接也是蓝色的（就是鼠标移开后还是保持蓝色，当然，前提是你得为每一个连接加一个不同的
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获取到的分页号相同的链接定义背景图片位置，达到点击过后，那个连接也是蓝色的（就是鼠标移开后还是保持蓝色，当然，前提是你得为每一个连接加一个不同的
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
