两个问题:
--1-- 显示全部页数。但我希望它显示为:
<< Prev . . 3 4 [5] 6 7 . . Next >>
--2-- 当我将鼠标悬停在当前页号上时,它应该更改颜色或增加字体大小,但是当我修改 a:hover 的 css 时,所有页号都会更改颜色或大小,而不是更改颜色或大小我指着。另外,当修改 a:active 时,什么也没有发生。
这是我在php中的分页代码:
$self = $_SERVER['PHP_SELF'];
$limit = 2; //Number of results per page
$numpages=ceil($totalrows/$limit);
$query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit";
$result = mysql_query($query, $conn)
or die('Error:' .mysql_error());
?>
<div class="caption">Search Results</div>
<div class="center_div">
<table>
<?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
$cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result);
?>
<tr>
<td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td>
<td style="font-size:16px;"><?php echo $cQuote; ?></td>
<td style="font-size:12px;"><?php h($row['vAuthor']); ?></td>
<td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td>
</tr>
<?php } ?>
</table>
</div>
<div class="searchmain">
<?php
//Create and print the Navigation bar
$nav="";
$next = $page+1;
$prev = $page-1;
if($page > 1) {
$nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a></span>";
$first = "<span class=\"searchpage\"><a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a></span>" ;
}
else {
$nav .= " ";
$first = " ";
}
for($i = 1 ; $i <= $numpages ; $i++) {
if($i == $page) {
$nav .= "<span class=\"searchpage\">$i</span>";
}else{
$nav .= "<span class=\"searchpage\"><a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a></span>";
}
}
if($page < $numpages) {
$nav .= "<span class=\"searchpage\"><a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a></span>";
$last = "<span class=\"searchpage\"><a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a></span>";
}
else {
$nav .= " ";
$last = " ";
}
echo $first . $nav . $last;
?>
</div>
这就是它当前的显示方式:
替代文本http://img714.imageshack.us/img714/7184/pag1l.jpg
CSS:
.searchmain {
margin:30px;
text-align: center;
}
.searchpage {
border: solid 1px #ddd;
background: #fff;
text-align:left;
font-size: 16px;
padding:9px 12px;
color: #FEBE33;
margin-left:2px;
}
.searchpage a{
text-decoration: none;
color: #808080;
}
.searchpage a:hover {
color: #FEBE33;
border-color: #036;
text-decoration: none;
}
.searchpage a:visited {
color: #808080;
}
第一个程序的解决方案似乎非常简单;您知道要显示的周围链接的数量,因此您可以简单地从
current_page - surrounding_links
循环到 current_page + surrounding_links
。添加一些开始、结束以及何时显示点的条件,然后就完成了。
对于CSS;我不完全确定你想要实现什么,但我认为你可以通过仅使用
a
标签来解决它,周围的 spans
似乎是多余的,你只需要它们来处理不是链接的项目(.no_link
中下面的例子):
a, .no_link {
float: left;
display: block;
padding:9px 12px;
border: solid 1px #ddd;
background: #fff;
text-align:left;
font-size: 16px;
}
a {
color: #808080;
}
a:hover {
color: #FEBE33;
border-color: #036;
}
.no_link {
color: #FEBE33;
}
1. 更改此 CSS 的内边距和边框属性:
.searchpage {
border: none;
background: #fff;
text-align:left;
font-size: 16px;
padding:3px;
color: #FEBE33;
margin-left:2px;
}
并在 $i 周围添加方括号代码。
for($i = 1 ; $i <= $numpages ; $i++) {
if($i == $page) {
$nav .= "<span class=\"searchpage\">[$i]</span>";
这应该会改变你的数字的视觉效果,我还没有测试过它,因为你没有实时网站,但它应该可以工作。
2. 而不是
.searchpage a:hover
尝试 searchmain a:hover
。
这些都没有经过测试,但最好是在查看您的代码后我能想到的。希望它至少能帮助您指明正确的方向:)