There is a main page, it displays 5 entries, and below there are switches to other pages where the other 5 entries will be displayed. These switches in the form of buttons 114 pieces. They are generated by the code:

for ($x=1;$x<=($num_rows)/5+1;$x++) echo "<div id='foot'><a href='?page=".$x."' class='col' style='text-decoration:none;color:black'>".$x."</a></div>"

Where $ x is the current page number. enter image description here

It is necessary that when you click on a div with a link to a page, the color of the div will change while I'm on it.
I do it like this:

 <script> $(document).ready(function () { $('a.col').click(function () { $(this).parent().css('background-color','darkmagenta'); $(this).css('color','red'); }) }) </script>

Everything seems to be nothing, but the color changes only for a split second, and then returns back to its original state. Here is the CSS file:

 * {margin:0; padding:0} div { font-family: Calibri; } h1 { font-family: Arial,sans-serif; border-bottom-style: dotted; border-bottom-width: thin; margin-top: 15px; margin-left:15px; margin-bottom: 15px; } body { height: 100%; } #content { height: 100%; clear: both; padding-left: 15px; padding-right: 15px; } #footer { width:98%; height:150px; left:0; bottom:0; margin:0; position:fixed; background-color:white; padding-left: 20px; padding-right:15px; } #page {border-top-style: dotted; border-top-width: thin; font-family: Arial,sans-serif; font-size: 18px; margin-top: 10px; padding-top: 5px; margin-bottom: 5px; } .announce { font-size:17px; } #foot { background-color:#dfe7ff; border-style: solid; border-color:grey; border-width: thin; display: inline-block; position: relative; text-align: center; font-family: "Calibri Light"; font-size: 15px; width:35px; height:17px; margin-right: 5px; margin-bottom:5px; } #foot:hover { background-color: darkmagenta; color: white; } span.date { background-color: darkmagenta; color: white; font-family:Calibri; margin:3px 8px 0 0; } .title { font-size: 20px; } .col { display: block; }
It is necessary that it changes for as long as I am on the page.

  • one
    so you go to another page, the whole render is re-working, you should add the css class of type active or selected , which is set from php - Grundy
  • one
    to create in the cycle many divs with the same id - bad - alenkins
  • it is easier to check in php code if the page is active, to give the page number classes, and in css - the color of this class is red. - Jean-Claude
  • I'm not sure that the numbering is properly built, or have you planned to display only one fifth of the links? - Grundy
  • I have 566 entries in the table, I put out 5 entries on each page. Therefore, the number 114. - soloway0000

2 answers 2

Add class active if the page is active:

 for ($x=1;$x<=($num_rows)/5+1;$x++) { if($x == $pg){ echo "<div class='foot' id='".$x."'><a href='?page=".$x."' class='col active' style='text-decoration:none;color:black'>".$x."</a></div>" } else { echo "<div class='foot' id='".$x."'><a href='?page=".$x."' class='col' style='text-decoration:none;color:black'>".$x."</a></div>" } }

In css add:

 .active { background-color: red; }

Or so:

 for ($x=1;$x<=($num_rows)/5+1;$x++) { $active_class = ''; if($x == $pg) { $active_class = ' active' } echo "<div class='foot' id='".$x."'><a href='?page=".$x."' class='col" . $active_class . "' style='text-decoration:none;color:black'>".$x."</a></div>" }
  • The second option is definitely more convenient :) - alenkins
  • Thank you, you have not had time to lay out the second method, I have already done the first one and it all worked. I definitely wrap myself on the mustache and will no longer ask stupid questions. Thank you - soloway0000

Since I am a beginner for me it is difficult, if anyone knows how. Modify. Thanks!

 <?php include_once "connection.php"?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="jquery-1.12.0.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> </head> <body> <h1>Новости</h1> <div id="content"> <?php //Узнаю текущую страницу if (isset($_GET['page'])) { if ($_GET['page']==null) $pg=1; else $pg=$_GET['page']; } else { $pg=1; } //Вывожу 5 записей if ($result = mysqli_query($link, "SELECT * FROM news ORDER BY idate LIMIT ".(5*($pg-1)).",5")) { while( $row = mysqli_fetch_assoc($result)) { echo "<br>"; echo "<span class='date'>".gmdate('mdy',$row['idate'])."</span>"; echo "<a href='view.php?id=".$row['id']."'<span class='title'>".$row['title']."</span></a>"; echo "<br>"; echo "<span class='announce'>".$row['announce']."</span>"; echo "<br>"; } mysqli_free_result($result); } ?> </div> <div id="footer"> <strong><p id="page"> Страницы:</p></strong> <?php //Вывожу кнопки-ссылки на другие страницы $num_rows=0; if ($result=mysqli_query($link,'SELECT*FROM news')) { $num_rows=mysqli_num_rows($result); mysqli_free_result($result); } mysqli_close($link); for ($x=1;$x<=($num_rows)/5+1;$x++) echo "<div class='foot' id='".$x."'><a href='?page=".$x."' class='col' style='text-decoration:none;color:black'>".$x."</a></div>" ?> </div> <script> $(document).ready(function () { $('a.col').click(function () { $(this).parent().css('background-color','red'); }) }) </script> </body> </html>