Why can't my page change color?

This paging function outputs the page number

<code>for($i=$start;$i<=$end;$i++){
        echo '<li style="width:20px;display:inline-block;
        height:25px;border:1px solid black;line-height:25px">
        <a class="pages" style="display:inline-block;width:100%;height:100%;" href="'.$_SERVER["SCRIPT_NAME"].'?page='.$i.'&num='.$num.'">'.($i).'</a>
        </li>';
       }</code>

This js code is used to change the color. Whichever one is clicked will turn red, while the others will change to the original color. But why every time I click, only the moment I click will turn red, and then it will change to the original color again. This js There is no problem with the code. I took out the js code separately and tested it. There is no problem. It can change color and other colors change to the original color. But why doesn’t it work here? It only turns red when clicked. Why is this? Is it because a jump occurred that it changed color and then changed back immediately? Why?

<code>var topMenus = getClass('a','pages');
       for(var i=0;i < topMenus.length; i++)
       { 
         topMenus[i].onclick=function(){
          for(var i=0;i < topMenus.length; i++){
            topMenus[i].style.backgroundColor="#858585"
          }  
          this.style.backgroundColor="red";  
         }
       }
 
     function getClass(tagName,className) 
{
    if(document.getElementsByClassName) 
    {        return document.getElementsByClassName(className);
    }
    else
    {       var tags=document.getElementsByTagName(tagName);
        var tagArr=[];
        for(var i=0;i < tags.length; i++)
        {
            if(tags[i].class == className)
            {
                tagArr[tagArr.length] = tags[i];
            }
        }
        return tagArr;
    }</code>

Reply content:

This paging function outputs the page number

<code>for($i=$start;$i<=$end;$i++){
        echo '<li style="width:20px;display:inline-block;
        height:25px;border:1px solid black;line-height:25px">
        <a class="pages" style="display:inline-block;width:100%;height:100%;" href="'.$_SERVER["SCRIPT_NAME"].'?page='.$i.'&num='.$num.'">'.($i).'</a>
        </li>';
       }</code>

This js code is used to change the color. Whichever one is clicked will turn red, while the others will change to the original color. But why every time I click, only the moment I click will turn red, and then it will change to the original color again. This js There is no problem with the code. I took out the js code separately and tested it. There is no problem. It can change color and other colors change to the original color. But why doesn’t it work here? It only turns red when clicked. Why is this? Is it because a jump occurred that it changed color and then changed back immediately? Why?

<code>var topMenus = getClass('a','pages');
       for(var i=0;i < topMenus.length; i++)
       { 
         topMenus[i].onclick=function(){
          for(var i=0;i < topMenus.length; i++){
            topMenus[i].style.backgroundColor="#858585"
          }  
          this.style.backgroundColor="red";  
         }
       }
 
     function getClass(tagName,className) 
{
    if(document.getElementsByClassName) 
    {        return document.getElementsByClassName(className);
    }
    else
    {       var tags=document.getElementsByTagName(tagName);
        var tagArr=[];
        for(var i=0;i < tags.length; i++)
        {
            if(tags[i].class == className)
            {
                tagArr[tagArr.length] = tags[i];
            }
        }
        return tagArr;
    }</code>

Yes, because of the jump, each of your paging buttons will let you jump to it, and the jump means that your entire page will be reloaded once, and the styles and javascript will be re-read.

So you have to change your thinking: Since the jump cannot retain the effect of the previous web page, how do I know which page I am currently on?

It seems that your code is a mixture of php and HTML, so you can use php to determine which paging button is red

About using php to input html, there is a better way:

<? for( $i = $start ; $i <= $end ; $i++): ?>
    <li style="width:20px;display:inline-block;height:25px;border:1px solid black;line-height:25px">
        <a class="pages" style="display:inline-block;width:100%;height:100%;" href="<?= $_SERVER["SCRIPT_NAME"] . '?page=' . $i . '&num=' . $num ?>"><?= $i ?></a>
    </li>
<? endfor ?>

<?= $something?> = <? echo $something ?>

Suppose there is a variable representing the current page: $currentPage

We can use a simple judgment to add a red background to the matching score page button

<? for( $i = $start ; $i <= $end ; $i++): ?>
    <li style="width:20px;display:inline-block;height:25px;border:1px solid black;line-height:25px">
        <a class="pages" style="background:<?= $currentPage === $i ? 'red' : 'grey' ?>;display:inline-block;width:100%;height:100%;" href="<?= $_SERVER["SCRIPT_NAME"] . '?page=' . $i . '&num=' . $num ?>"><?= $i ?></a>
    </li>
<? endfor ?>

Here’s the point:

background:<?= $currentPage === $i ? 'red' : 'grey' ?>

If the current page and the page number of the paging button are consistent, return red, if not, return grey

Additional comments

It seems that you need to use a function to handle pagination, that is:

// 這邊我不太清楚 $num 是什麼
function fenye($start, $end, $num, $current) {
    $html = '<ul>';
    for( $i = $start ; $i <= $end ; $i++) {
        $background = $i === $current ? 'red' : 'grey';
        $html.= '<li style="width:20px;display:inline-block;height:25px;border:1px solid black;line-height:25px">';        
        $html.= "<a class=\"pages\" style=\"background: $background;display:inline-block;width:100%;height:100%;\" href=\"$_SERVER[SCRIPT_NAME]?page=$i&num=$num\">$i</a>";    
        $html.= '</li>';
    }
    $html.= '</ul>';
    echo $html;
}

In this way, you can insert fenye(...)

where you need to output paginated content.

    <?php fenye($start, $end, $num, $page) ?>

Have you tried defining the style of the currently activated paging button and the style of the ordinary paging button in css