내 페이지의 색상이 변경되지 않는 이유는 무엇입니까?

페이지 번호를 출력하는 페이징 기능

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

이 js 코드는 색상을 변경하는 데 사용됩니다. 클릭한 항목은 빨간색으로 바뀌고 다른 항목은 원래 색상으로 변경됩니다. 그런데 왜 클릭할 때마다 잠시만 클릭만 빨간색으로 바뀌나요? 이 js 코드는 문제가 없는데, js 코드를 따로 꺼내어 테스트해 보니 문제가 없더군요. 다른 색상도 원래 색상으로 바뀌는군요. 여기서는 작동하나요? 클릭하면 빨간색으로 변합니다. 왜 그런가요? 점프가 일어나서 색이 바뀌었다가 바로 다시 바뀌는 걸까요? 왜?

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

답글 내용:

페이지 번호를 출력하는 페이징 기능

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

이 js 코드는 색상을 변경하는 데 사용됩니다. 클릭한 항목은 빨간색으로 바뀌고 다른 항목은 원래 색상으로 변경됩니다. 그런데 왜 클릭할 때마다 잠시만 클릭만 빨간색으로 바뀌나요? 이 js 코드는 문제가 없는데, js 코드를 따로 꺼내어 테스트해 보니 문제가 없더군요. 다른 색상도 원래 색상으로 바뀌는군요. 여기서는 작동하나요? 클릭하면 빨간색으로 변합니다. 왜 그런가요? 점프가 발생해서 색상이 바뀌었다가 바로 다시 바뀌는 걸까요? 왜?

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

예, 점프 때문에 각 페이징 버튼을 사용하여 해당 페이지로 이동할 수 있으며, 점프는 전체 페이지가 한 번 다시 로드되고 스타일과 javascript이 다시 읽힌다는 것을 의미합니다.

그러므로 생각을 바꿔야 합니다. 점프는 이전 웹페이지의 효과를 유지할 수 없으므로 현재 어떤 페이지에 있는지 어떻게 알 수 있나요?

귀하의 코드를 보면 php과 HTML가 혼합되어 있으므로 php를 사용하여 어떤 페이징 버튼이 빨간색인지 확인할 수 있습니다

php을 사용하여 html을 입력하는 것과 관련하여 더 좋은 방법이 있습니다:

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

현재 페이지를 나타내는 변수가 있다고 가정해 보겠습니다. $currentPage

간단한 판단을 통해 일치하는 점수 페이지 버튼에 빨간색 배경을 추가할 수 있습니다

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

핵심은 다음과 같습니다.

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

현재 페이지와 페이징 버튼의 페이지 번호가 일치하면 red을 반환하고, 일치하지 않으면 grey

을 반환합니다.

추가 코멘트

페이지 매김을 처리하려면 다음과 같은 함수를 사용해야 할 것 같습니다.

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

이렇게 하면 페이지가 매겨진 콘텐츠를 출력해야 하는 곳에 fenye(...)

을 삽입할 수 있습니다.

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

Css에서 현재 활성화된 페이징 버튼의 스타일과 일반 페이징 버튼의 스타일을 정의해 보셨나요?