ページ番号：ハイライト現在の番号ボタン

Question

私は現在のページ番号ボタンを強調表示するのに苦労しています。 ページ区切りは完全に機能します。ボタンは、ボタンの上にマウスを置いたときだけでなく、すべて正しく表示されます。しかし、私はホバーのと同じスタイルを持っている現在のページ番号ボタンをコーディングしたい：

私は誤ったコードをアップロードした場合にも

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

本当に申し訳ありません - まだこれのこつを取得しようとしています。

Answer 1

もし私が間違っていないのであれば、現在のボタンを強調表示するアクティブなクラスを1つ作成し、ボタンを表示する場所に以下のコードを追加する必要があります。

はSaheb-Mondal @あなた

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