長文章分頁代碼，頁碼可以隨鼠標移動和當前所在頁碼變色

長文章分頁代碼，頁碼可以隨鼠標移動和當前所在頁碼變色，常見於門戶網站的時尚娛樂總結類文章，比如：

php代碼一覽

<link href="textpage.css" rel="stylesheet" type="text/css"/>
<script>
     $(function(){
     $(".enable").hover(function(){
        $(this).css({"background-color":"#ffffff","cursor":"pointer","text-decoration": "underline"})
     },
     function(){
        $(this).css({"background-color":"#B5D5FE","cursor":"default","text-decoration": "none"})
        }
    );
    });
     </script> 

<div class="iclcc-teacher-page">
    <table cellspacing="5px">
        <tbody>
            <tr>
<?php 
$str = "測試1[NextPage]測試2[NextPage]測試3[NextPage]測試4[NextPage]測試5[NextPage]測試6"; 
//測試用的字符串
if(empty($_REQUEST['page'])){
    $_REQUEST['page'] = 1;
}
//接收頁碼，如果接收到的頁碼爲空值，默認此頁爲第一頁
$page = $_REQUEST['page'];
//如果接收到的頁碼非空值，此頁數等於接收到的頁碼
$arr = explode("[NextPage]",$str); 
//把字符串用關鍵字進行分割 
if(count($arr)==1){ 
 echo $str; 
//如果字符串被分割成爲1段，那麼直接輸出字符串
}else{  
 echo $arr[$page-1]; 
//如果字符串被分割爲1段以上，那麼輸出當前頁碼的字符串
 echo "<br/>"; 
 //換行
 if($page == 1){   
 echo '<td class="disabled"><a>首頁</a></td>';
 //如果現在處於首頁，則首頁發白無法點擊
 echo '<td class="disabled"><a>上一頁</a></td>';
 //如果現在處於首頁，則上一頁發白無法點擊
 }else{
 echo '<td class="enable"><a href="?page=1">首頁</a></td>';
 //如果處於既非首頁也非末頁，則首頁變色，可以點擊
 echo '<td class="enable"><a href="?page=';
 echo $page-1;
 echo '">';
 echo "上一頁";
 echo '</a></td>';
 //如果現在處於既非首頁也非末頁，則上一頁變色，可以點擊
 }

 for($i=1;$i<=count($arr);$i++){
 if($page == $i){
 echo '<td class="disabled">';
 echo "<a>$i</a>";
 echo '</td>';
//如果處於當前頁，輸出頁碼，頁碼發白無法點擊 
 }else{
 echo '<td class="enable"><a href="?page=';
 echo "$i";
 echo '">';
 echo "$i";
 echo '</a></td>';
//如果未處於當前頁，輸出頁碼，頁碼變色可以點擊 
 } 
 } 
 if($page == count($arr)){     
 echo '<td class="disabled"><a>下一頁</a></td>';
 //如果現在處於尾頁，則下一頁發白無法點擊
 echo '<td class="disabled"><a>尾頁</a></td>';
 //如果現在處於既非首頁也非尾頁，則下一頁變色可以點擊
 }else{
 echo '<td class="enable"><a href="?page=';
 echo $page+1;
 echo '">';
 echo "下一頁";
 echo '</a></td>';
 //如果現處於尾頁，則尾頁發白無法點擊
 echo '<td class="enable"><a href="?page=';
 echo count($arr);
 echo '">';
 echo "尾頁";
 echo '</a></td>';
 }
 //如果現在處於既非首頁也非尾頁，則尾頁變色可以點擊  
} 
?>
</tr>
    </tbody>
        </table>
        </div>

css代碼一覽

.iclcc-teacher-page table{
    margin: 0 auto;
    text-decoration: none;
}

.iclcc-teacher-page tr td {
    padding: 10px;
    line-height: 10px;
    font-size: 15px;
    border-color: #3266CC;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;  
}

.iclcc-teacher-page table tr td a{
    text-decoration: none;
    color: #363636;
}

.iclcc-teacher-page table tr td a:hover{
    text-decoration: none;
    color: #363636;
}

.disabled{
    background-color: #ffffff;
}

.enable{
    background-color: #B5D5FE;  
}

以下是我自己的效果