我一直在努力突出显示当前的页码按钮。 分页工作完美。当您将鼠标悬停在按钮上方时,这些按钮都可以正常显示。但是,我想将当前页码按钮编码为与hover的相同样式:
<?php
$num_rec_per_page=5;
$connection=mysqli_connect("host","username","password","database");
$sqlOne = "SELECT * FROM databaseTable";
$rs_result = mysqli_query($connection,$sqlOne); //run the query
$total_records = mysqli_num_rows($rs_result); //count number of records
$total_pages = ceil($total_records / $num_rec_per_page);
$thing = $total_pages-2;
if (mysqli_connect_errno())
{
echo "The application has failed to connect to the mysql database server: " . mysqli_connect_error();
} //The statement of unsuccessful connection //If connection is unsuccessful
if (isset($_GET["page"]))
{
$page = $_GET["page"];
}
else
{
$page=1;
}
$start_from = ($page-1) * $num_rec_per_page;
$sql = "SELECT * FROM databaseTable ORDER by ID LIMIT $start_from, $num_rec_per_page";
$rs_result = mysqli_query ($connection,$sql); //run the query
$next_page = $page + 1;
$prev_page = $page - 1;
echo("<div class='paginateMainTopContainer'>");
echo("<div class='paginateSubTopContainer'>");
echo("<div class='paginateContainer' align='center'>");
echo("<div class='paginateTop' align='center'>");
echo "<a href='?page=1' class='pageButtonLast'>".'First'."</a> "; // Goto 1st page
if ($page > 1)
echo "<a href='?page=".$prev_page."' class='pageButtonLast'>".'Previous'."</a> "; // Goto last page
else
echo "<a href='?page=1' class='pageButtonLast'>".'Previous'."</a> "; // Goto last page
//for ($i=1; $i<=$total_pages; $i++) {
if($page<=1)
for ($i=max(1, $page - 4); $i<=min($page + 4,$total_pages); $i++)
{
echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> ";
}
elseif($page>=$total_pages)
for ($i=max(1, $page - 4); $i<=min($page + 4,$total_pages); $i++)
{
echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> ";
}
elseif($page>2 && $page<=$thing)///////////////////
for ($i=max(1, $page - 2); $i<=min($page + 2,$total_pages); $i++)
{
echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> ";
}
elseif($page>$thing)
for ($i=max(1, $page - 3); $i<=min($page + 3,$total_pages); $i++)
{
echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> ";
}
elseif($page=2)
for ($i=max(1, $page - 3); $i<=min($page + 3,$total_pages); $i++)
{
echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> ";
}
if ($page < $total_pages)
echo "<a href='?page=".$next_page."' class='pageButtonLast'>".'Next'."</a> "; // Goto last page
else
echo "<a href='?page=".$total_pages."' class='pageButtonLast'>".'Next'."</a> "; // Goto last page
echo "<a href='?page=$total_pages' class='pageButtonLast'>".'Last'."</a> "; // Goto last page
echo("</div>");
echo("</div>");
echo("</div>");
echo("</div>");
?>
.paginateMainTopContainer{
background:#FFFFFF;
--width:100%;
width:1599px;
height:50px;
margin-left:auto;
margin-right:auto;
}
.paginateSubTopContainer{
position:relative;
display:block;
--background:#000000;
width:1000px;
height:50px;
margin-left:auto;
margin-right:auto;
--top:160px;
--border:1px solid;
}
.paginate{
position:relative;
display: inline;
--top:635px;
--left:130px;
--text-align: left;
color: #5F5F5F;
font-family: "Gothic", Verdana, serif;
font-size: 14px;
--width:100%;
--padding:0;
left: auto;
right: auto;
}
.paginateContainer{
position:relative;
--border: 1px solid;
width:100%;
top:12px;
height:30px;
}
.paginateContainerTwo{
border: 0px solid;
width:100%;
--height:50px;
}
.paginateTop{
position:relative;
display: inline;
--top:610px;
--left:130px;
--text-align: left;
color: #5F5F5F;
font-family: "Gothic", Verdana, serif;
font-size: 14px;
--width:5000px;
--padding:0;
--left: 500px;
--right: 500px;
left: auto;
right: auto;
}
.pageButton{
display: inline-block;
position:relative;
background-image: url('images/paginateButtons1.png');
max-width:28px;
max-height:28px;
min-width:28px;
min-height:28px;
background-repeat:no-repeat;
background-size:28px 28px;
padding:5px 0px 0px 0px;
--border:1px solid;
--margin-left: auto;
--margin-right: auto;
text-align:center;
}
.pageButton:hover{
display: inline-block;
position:relative;
background-image: url('images/paginateButtons2.png');
width:28px;
height:28px;
background-repeat:no-repeat;
background-size:28px 28px;
padding:5px 0px 0px 0px;
--border:1px solid;
margin-left: auto;
margin-right: auto;
}
.pageButton a.current{
display: inline-block;
position:relative;
background-image: url('images/paginateButtons2.png');
width:28px;
height:28px;
background-repeat:no-repeat;
background-size:28px 28px;
padding:5px 0px 0px 0px;
--border:1px solid;
margin-left: auto;
margin-right: auto;
}
.pageButtonLast{
display: inline-block;
position:relative;
background-image: url('images/paginateButtons3.png');
width:74px;
height:28px;
background-repeat:no-repeat;
background-size:74px 28px;
padding:5px 0px 0px 0px;
--border:1px solid;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.pageButtonLast:hover{
display: inline-block;
position:relative;
background-image: url('images/paginateButtons4.png');
width:74px;
height:28px;
background-repeat:no-repeat;
background-size:74px 28px;
padding:5px 0px 0px 0px;
--border:1px solid;
margin-left: auto;
margin-right: auto;
}
如果我错误地上传了代码,也真的很抱歉 - 仍然试图解决这个问题。
答案 0 :(得分:1)
如果我没有错,你只缺少一件事,你必须创建一个活动类来突出显示当前按钮,并且必须在显示按钮的地方添加以下代码。
看看这段代码是否有效
if($page==$i)
{
echo "<a href='?page=".$i."' class='active'>".$i."</a> ";// please make .active class in your style
}
else{
echo "<a href='?page=".$i."' class='pageButton'>".$i."</a> ";
}