当前位置:Gxlcms > PHP教程 > 为什么我这个分页变不了颜色呢?

为什么我这个分页变不了颜色呢?

时间:2021-07-01 10:21:17 帮助过:6人阅读

这个分页函数输出页码

for($i=$start;$i<=$end;$i++){
        echo '
  • '.($i).'
  • '; }

    这个js代码用来改变颜色  点击哪个哪个就变成红色  同时其它的变成原来的颜色     可是为什么我每次点击是只有点击的一瞬间变成红色呢 然后就又变成了原来的颜色   这个js代码没有问题  我把js代码单独拿出去测试没有问题 可以变色同时其它的变成原来的颜色    可是为什么在这里却不行呢 只有点击的一瞬间变成红色  这是为什么?是不是因为发生了跳转所以变了一下色又马上变回去了?到底是为什么?

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

    回复内容:

    这个分页函数输出页码

    for($i=$start;$i<=$end;$i++){
            echo '
  • '.($i).'
  • '; }

    这个js代码用来改变颜色  点击哪个哪个就变成红色  同时其它的变成原来的颜色     可是为什么我每次点击是只有点击的一瞬间变成红色呢 然后就又变成了原来的颜色   这个js代码没有问题  我把js代码单独拿出去测试没有问题 可以变色同时其它的变成原来的颜色    可是为什么在这里却不行呢 只有点击的一瞬间变成红色  这是为什么?是不是因为发生了跳转所以变了一下色又马上变回去了?到底是为什么?

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

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

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

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

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

    
        
  • ">
  • =

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

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

    
        
  • ;display:inline-block;width:100%;height:100%;" href="">
  • 重點在這裡:

    background:

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

    補充評論

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

    // 這邊我不太清楚 $num 是什麼
    function fenye($start, $end, $num, $current) {
        $html = '
      '; for( $i = $start ; $i <= $end ; $i++) { $background = $i === $current ? 'red' : 'grey'; $html.= '
    • '; $html.= "$i"; $html.= '
    • '; } $html.= '
    '; echo $html; }

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

    
        
    

    有没有试过在css中定义,当前激活的分页按钮的样式和普通分页按钮的样式呢

    人气教程排行