单击 link 后如何保持 :active css 样式？

Question

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

HTML导航table:

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

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

单击 link 后如何保持 :active css 样式？

How to keep an :active css style after clicking a link?

html

css

fonts

icons