目錄
回覆內容:
首頁 後端開發 php教程 為什麼我這個分頁變不了顏色呢?

為什麼我這個分頁變不了顏色呢?

Aug 04, 2016 am 09:20 AM
php

這個分頁函數輸出頁碼

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

這個js代碼用來改變顏色  點擊哪個哪個就變成紅色  同時其它的變成原來的顏色     可是為什麼我每次點擊是只有點擊的一瞬間變成紅色呢 然後就變成了原來的顏色   這個js程式碼沒有問題  我把js程式碼單獨拿出去測試沒有問題 可以變色同時其它的變成原來的顏色    可是為什麼在這裡卻不行呢 只有點擊的一瞬間變成紅色  這是為什麼?是不是因為發生了跳轉所以變了一下色又馬上變回去了?到底是為什麼?

<code>var topMenus = getClass('a','pages');
       for(var i=0;i &lt; topMenus.length; i++)
       { 
         topMenus[i].onclick=function(){
          for(var i=0;i &lt; 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 &lt; tags.length; i++)
        {
            if(tags[i].class == className)
            {
                tagArr[tagArr.length] = tags[i];
            }
        }
        return tagArr;
    }</code>
登入後複製
登入後複製

回覆內容:

這個分頁函數輸出頁碼

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

這個js代碼用來改變顏色  點擊哪個哪個就變成紅色  同時其它的變成原來的顏色     可是為什麼我每次點擊是只有點擊的一瞬間變成紅色呢 然後就變成了原來的顏色   這個js程式碼沒有問題  我把js程式碼單獨拿出去測試沒有問題 可以變色同時其它的變成原來的顏色    可是為什麼在這裡卻不行呢 只有點擊的一瞬間變成紅色  這是為什麼?是不是因為發生了跳轉所以變了一下色又馬上變回去了?到底是為什麼?

<code>var topMenus = getClass('a','pages');
       for(var i=0;i &lt; topMenus.length; i++)
       { 
         topMenus[i].onclick=function(){
          for(var i=0;i &lt; 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 &lt; tags.length; i++)
        {
            if(tags[i].class == className)
            {
                tagArr[tagArr.length] = tags[i];
            }
        }
        return tagArr;
    }</code>
登入後複製
登入後複製

沒錯,就是因為跳轉,你的每個分頁按鈕都會讓你跳轉到,而跳轉就意味著你整個頁面會重載一次,樣式、javascript 都會重新讀取。

所以你得轉換思路:既然跳轉不能保留上一個網頁的效果,那我該如何知道當前是哪一個頁面?

看你代碼是 phpHTML 混合,所以可以用 php 判定現在頁面的方式來決定哪個分頁按鈕為紅色

關於利用 php 輸入 html ,有一種方式更好:

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

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

那假設現在有一個變數代表當前頁: $currentPage

我們就可以用一個簡單的判斷式來為符合得分頁按鈕加上紅色背景

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

重點在這裡:

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

如果當前頁和分頁按鈕的頁數一致,就回傳 red , 不符合就回傳 grey

補充評論

看起來你是要用一個函數來處理分頁,那就是:

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

這樣你在需要輸出分頁內容的地方插入 fenye(...)

    &lt;?php fenye($start, $end, $num, $page) ?&gt;
登入後複製

為什麼我這個分頁變不了顏色呢?

有沒有試過在css中定義,目前啟動的分頁按鈕的樣式和普通分頁按鈕的樣式呢

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南

CakePHP 日期和時間 CakePHP 日期和時間 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和時間

CakePHP 專案配置 CakePHP 專案配置 Sep 10, 2024 pm 05:25 PM

CakePHP 專案配置

CakePHP 檔案上傳 CakePHP 檔案上傳 Sep 10, 2024 pm 05:27 PM

CakePHP 檔案上傳

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

討論 CakePHP 討論 CakePHP Sep 10, 2024 pm 05:28 PM

討論 CakePHP

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 Dec 20, 2024 am 11:31 AM

如何設定 Visual Studio Code (VS Code) 進行 PHP 開發

See all articles