html - 如何保留 :active css style after clicking a link?

Question

我需要有关在单击图标后创建 :active 样式的帮助。我正在使用 Font-awesome 图标，无法锻炼如何在单击图标后使图标保持某种颜色，任何帮助都会很棒，谢谢

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>

简单来说，就是在元素被点击后添加一个具有新值的新类。