這個分頁函數輸出頁碼
<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中定義,目前啟動的分頁按鈕的樣式和普通分頁按鈕的樣式呢