クリックしたときにこのコードがページ番号を灰色にしないのはなぜですか？

Question

私はページ番号をクリックできる場所でポケベルを作ろうとしましたが、色はグレーになります。しかし、それは悲惨に失敗するようです。なぜこのコードはグレイでクリックされたページャ番号を作らないのですか？私は今それをうまくいけばそれは動作するように修正しようとしています。

function my(i) { 
    document.getElementsByClassName('number')[0].removeAttribute("id"); 
    i.id = "act"; 
} 

.pager li.active > a:active { 
 
    color: grey !Important; 
 
} 
 
     
 
.pager > li > a.right-arrow { 
 
    margin-left: 410px; 
 
    width: 30px; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 0px 5px #9ecaed; 
 
    font-size: 15px; 
 
    padding: 7px; 
 
    line-height: 1; 
 
} 
 

 
.pager > li > a.left-arrow { 
 
    margin-right: 410px; 
 
    width: 30px; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 0px 5px #9ecaed; 
 
    font-size: 15px; 
 
    transform: rotate(180deg); 
 
    padding: 7px; 
 
    line-height: 1; 
 
} 
 
     
 
.number { 
 
    border-color: white !Important; 
 
    padding: 5px !Important; 
 
} 
 

 
a { 
 
    color: black !Important; 
 
} 
 

 
#act { 
 
    color: red !Important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center"> 
 
    <ul class="pager"> 
 
     <li><a href="#" class="left-arrow">➜</a></li> 
 
     <li><a href="" class="number" id="act" onclick='my(this);'>1</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>2</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>3</a></li> 
 
     <li class="number">...</li> 
 
     <li><a href="" class="number" onclick='my(this);'>7</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>8</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>9</a></li> 
 
     <li><a href="" class="right-arrow">➜</a></li> 
 
    </ul> 
 
</div>

Answer 1

あなたはそれがグレー色

function my(i){ 
 
    document.getElementById('act').removeAttribute("id"); 
 
i.id = "act"; 
 
}

.pager > li > a { 
 
     color: black !Important; 
 
    } 
 
    .pager >li:active > a:active { 
 
     color: grey !Important; 
 
    } 
 
    
 
     .pager > li > a.right-arrow { 
 
      margin-left: 410px; 
 
      width: 30px; 
 
      border-radius: 50%; 
 
      box-shadow: 0px 0px 5px #9ecaed; 
 
      font-size: 15px; 
 
      padding: 7px; 
 
      line-height: 1; 
 
     } 
 
    
 
     .pager > li > a.left-arrow { 
 
      margin-right: 410px; 
 
      width: 30px; 
 
      border-radius: 50%; 
 
      box-shadow: 0px 0px 5px #9ecaed; 
 
      font-size: 15px; 
 
      transform: rotate(180deg); 
 
      padding: 7px; 
 
      line-height: 1; 
 
     } 
 
    
 
    .number { 
 
     border-color: white !Important; 
 
     padding: 5px !Important; 
 
    } 
 
    #act{ 
 
     color: grey !Important; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center"> 
 
    <ul class="pager"> 
 
     <li><a href="#" class="left-arrow " onclick='my(this);'>➜</a></li> 
 
     <li><a href="" class="number" id=act onclick='my(this);'>1</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>2</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>3</a></li> 
 
     <li class="number">...</li> 
 
     <li><a href="" class="number" onclick='my(this);'>7</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>8</a></li> 
 
     <li><a href="" class="number" onclick='my(this);'>9</a></li> 
 
     <li><a href="" class="right-arrow">➜</a></li> 
 
    </ul> 
 
</div>

Answer 2

小さな誤植を生産されていない理由だ背景ではない色に設定していますラTER ...うまくいけば、これは動作するはずです...

.pager > li:active > a:active { 
    color: grey !Important; 
} 

Codepenリンク：https://codepen.io/anon/pen/ppbgBw

Answer 3

あなたはすべてのリンクのためにあなたのリンクのhref属性内のハッシュタグ（＃）を使用する必要があります。あなたがそれを使用していない場合は、 `javascript`をタグ付けしているのはなぜこの

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="text-center"> 
    <ul class="pager"> 
     <li><a href="#" class="left-arrow">➜</a></li> 
     <li><a href="#" class="number">1</a></li> 
     <li><a href="#" class="number">2</a></li> 
     <li><a href="#" class="number">3</a></li> 
     <li class="number">...</li> 
     <li><a href="#" class="number">7</a></li> 
     <li><a href="#" class="number">8</a></li> 
     <li><a href="#" class="number">9</a></li> 
     <li><a href="#" class="right-arrow">➜</a></li> 
    </ul> 
</div>