Question

在点击图标后，我需要帮助创建：活动样式。我正在使用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：

＆＃13;

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

＆＃13;

#target {
  width: 50px;height: 50px;
  background-color:red;
  transition: all 0.5s;
}

.newcolor {
  background-color: blue !important;
}

＆＃13;

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

＆＃13;

简单来说，在点击元素后，会为元素添加一个带有新值的新类。

单击链接后如何保持：活动的CSS样式？

1 个答案: