Php 分页：突出显示当前编号按钮

我一直在努力突出显示当前页码按钮。 分页效果很好。当你把鼠标悬停在按钮上方时，所有的按钮都会出现。但是，我希望对当前页码按钮进行编码，使其具有与悬停相同的样式：

    <?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;
    }

---

如果我没说错的话，您只需要创建一个活动类来突出显示当前按钮，并在显示按钮的位置添加以下代码

查看此代码是否适用于您

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> "; 
 }

if（$page==$i）
{
echo”“；//请按照您的风格创建.active类
}
否则{
回声“；
}
如果我没说错的话，您只需要创建一个活动类来突出显示当前按钮，并在显示按钮的位置添加以下代码

查看此代码是否适用于您

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> "; 
 }

if（$page==$i）
{
echo”“；//请按照您的风格创建.active类
}
否则{
回声“；
}
谢谢，@Saheb Mondal。从逻辑上讲，这听起来是对的。试图更改您在上面建议的更改，但它不起作用。php中的代码是否必须是特定于任何地方的（我在“if（$page<$total_pages）”行之前插入了代码）？另外，类id。。。应该是“pageButton active”还是“active”？尝试使用just active查看是否有任何效果。但是在active类中添加pageButton的所有元素只需更改active类的颜色谢谢@Saheb Mondal。从逻辑上讲，这听起来是对的。试图更改您在上面建议的更改，但它不起作用。php中的代码是否必须是特定于任何地方的（我在“if（$page<$total_pages）”行之前插入了代码）？另外，类id。。。应该是“pageButton active”还是“active”？尝试使用just active查看是否有任何效果。但是在active类中添加pageButton的所有元素只是更改active类的颜色