Warum kann die Farbe meiner Seite nicht geändert werden?

Diese Paging-Funktion gibt die Seitenzahl aus

<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>

Dieser js-Code wird verwendet, um die Farbe zu ändern, auf die geklickt wird, während die anderen die ursprüngliche Farbe annehmen. Aber warum wird jedes Mal, wenn ich klicke, nur der Klick für einen Moment rot und dann Es gibt kein Problem mit diesem js-Code. Es gibt kein Problem, aber warum nicht Funktioniert es hier? Es wird nur rot, wenn darauf geklickt wird. Liegt es daran, dass ein Sprung aufgetreten ist, dass die Farbe geändert und dann sofort wieder geändert wurde? Warum?

<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>

Antwortinhalt:

Diese Paging-Funktion gibt die Seitenzahl aus

<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>

Dieser js-Code wird verwendet, um die Farbe zu ändern, auf die geklickt wird, während die anderen die ursprüngliche Farbe annehmen. Aber warum wird jedes Mal, wenn ich klicke, nur der Klick für einen Moment rot und dann Es gibt kein Problem mit diesem js-Code. Es gibt kein Problem, aber warum nicht Funktioniert es hier? Es wird nur rot, wenn darauf geklickt wird. Liegt es daran, dass ein Sprung aufgetreten ist, dass die Farbe geändert und dann sofort wieder geändert wurde? Warum?

<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>

Ja, aufgrund des Sprungs können Sie zu jeder Ihrer Paging-Schaltflächen springen, und der Sprung bedeutet, dass Ihre gesamte Seite einmal neu geladen wird und der Stil und javascript erneut gelesen werden.

Sie müssen also umdenken: Woher weiß ich, auf welcher Seite ich mich gerade befinde, da der Sprung die Wirkung der vorherigen Webseite nicht beibehalten kann?

Wenn Sie sich Ihren Code ansehen, handelt es sich um eine Mischung aus php und HTML. Sie können also mit php bestimmen, welche Paging-Schaltfläche rot ist

Bezüglich der Verwendung von php zur Eingabe von html gibt es einen besseren Weg:

<code class="php"><? 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 ?></code>

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

Angenommen, es gibt eine Variable, die die aktuelle Seite darstellt: $currentPage

Wir können ein einfaches Urteil verwenden, um der Schaltfläche für die entsprechende Partiturseite einen roten Hintergrund hinzuzufügen

<code class="php"><? 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 ?></code>

Hier ist der Punkt:

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

Wenn die aktuelle Seite und die Seitennummer der Paging-Schaltfläche übereinstimmen, geben Sie red zurück. Wenn nicht, geben Sie grey

zurück

Zusätzliche Kommentare

Es scheint, dass Sie eine Funktion zur Handhabung der Paginierung verwenden müssen, nämlich:

<code class="php">// 這邊我不太清楚 $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;
}</code>

Auf diese Weise können Sie fenye(...)

dort einfügen, wo Sie paginierten Inhalt ausgeben möchten.

<code class="html">
    <?php fenye($start, $end, $num, $page) ?>
</code>

Haben Sie versucht, den Stil der aktuell aktivierten Paging-Schaltfläche und den Stil der normalen Paging-Schaltfläche in CSS zu definieren?