使用CSS和JavaScript点击，链接颜色在被点击和激活时会发生变化，直到我点击其他链接

Question

我正在尝试这样做：用户单击链接，然后单击的链接变为黄色并保持黄色，直到我单击单击链接旁边的链接。 所以他们需要切换。(不是：active(我认为这应该通过onclick完成。我个人想用css tho。

<div id="Space">
    <ul>
        <li role="presentation" class="sort">
            <a href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
        </li>
        <li role="presentation" class="date">
            <a href="/?sort=date&page=1" style="text-decoration:none;">update</a>
        </li>
    </ul>
</div>

目前在 css 中，我有

#Space li {
    display: inline;
    margin-left: 10px;
    padding-bottom: 11px;
}
#Space li:hover {
  border-bottom: 5px solid #6495ED;
}

对于 js 来说什么都没有。Javascript在html中带有<script></script>对吗？任何帮助将不胜感激，谢谢:)

Answer 1

您可以将

:active与:hover一起使用：

#Space li:active,
#Space li:hover {
  border-bottom: 5px solid #6495ED;
}

现在，这有点一直持续到您单击另一个链接为止。但是有更好的方法使用持续存在的<input type="radio" />。

#Space li {
  display: inline;
  margin-left: 10px;
  padding-bottom: 11px;
}
#Space li:focus,
#Space li:hover {
  border-bottom: 5px solid #6495ED;
  outline: 0;
}

<div id="Space">
  <ul>
    <li role="presentation" class="sort" tabindex="1">
      <a href="#" style="text-decoration:none;">hot</a>
    </li>
    <li role="presentation" class="date" tabindex="1">
      <a href="#" style="text-decoration:none;">update</a>
    </li>
  </ul>
</div>

我在上面的例子中使用了:focus，因为:hover与<li>而不是<a>相关联。

---

JavaScript 版本可以像添加和删除 .active 类一样简单。

Answer 2

在悬停中使用颜色：塞勒科

#Space li {
  display: inline;
  margin-left: 10px;
  padding-bottom: 11px;
}
#Space li:hover {
  border-bottom: 5px solid #6495ED;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Space">
  <ul>
    <li role="presentation" class="sort">
      <a href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
    </li>
    <li role="presentation" class="date">
      <a href="/?sort=date&page=1" style="text-decoration:none;">update</a>
    </li>
  </ul>
</div>