如何在點擊一個鏈接後保持活動的CSS樣式？

Question

我點擊圖標後需要幫助創建：主動式。我使用的字體 - 真棒圖標，並不能鍛鍊如何保持某種顏色的圖標後，已被點擊的圖標，任何幫助將是巨大的，謝謝

HTML導航表：

<table width="100" border="0" align="center" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td height="59"><li><a href="#"><i class="fa fa-university fa-lg "></i></li></td> 
      </tr> 
      <tr> 
      <td height="59"><li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></li></td> 
      </tr> 
      <tr> 
      <td height="59"> <li><a href="#"><i class="fa fa-picture-o fa-lg"></i></li></td> 
      </tr> 
      <tr> 
      <td height="59"><li><a href="#"><i class="fa fa-comments fa-lg"></i></li></td> 
      </tr> 
      <tr> 
      <td height="59"><li><a href="#"><i class="fa fa-tachometer fa-lg"></i></li></td> 
      </tr> 

的CSS創建了一個顏色懸停：

.fa-university:hover { 
color: white; 
transition: all 500ms ease-in-out; 

}

Answer 1

使用JavaScript：

document.getElementById("target").onclick=function() {//Detects a click on #target 
 

 
    if (this.classList) {//check if classlist is supported 
 
    this.classList.add("newcolor");//add the class 
 
    } else { 
 
    this.class += " newcolor";//if classlist isn't supported, add " newcolor" to the attribute value 
 
    } 
 
}

#target { 
 
    width: 50px;height: 50px; 
 
    background-color:red; 
 
    transition: all 0.5s; 
 
} 
 

 
.newcolor { 
 
    background-color: blue !important; 
 
}

<div id="target">Foo</div>

這簡單來說，增加了新的價值觀一類新的元素被點擊後它。