javascript - 使用 Css 的 Onclick 事件

Question

我正在尝试在 css 中为导航栏实现一个 onClick 事件。到目前为止，这是我的代码:

<div id="nav">
                               <ul>
                              <li class = "cat1">
                                  <a href="#">Jahr</a>
                              </li>
                              <li class = "cat2">
                                  <a href="#">Monat</a>
                                  <ul>
                                      <li><a href="#">Januar</a></li>
                                      <li><a href="#">Februar</a></li>
                                      <li><a href="#">März</a></li>
                                      <li><a href="#">April</a></li>
                                      <li><a href="#">Mai</a></li>
                                      <li><a href="#">Juni</a></li>
                                      <li><a href="#">Juli</a></li>
                                      <li><a href="#">August</a></li>
                                      <li><a href="#">September</a></li>
                                      <li><a href="#">Oktober</a></li>
                                      <li><a href="#">November</a></li>
                                      <li><a href="#">Dezember</a></li>
                                  </ul>
                              </li>
                              <li class = "catKultur">
                                  <a href="#">Kunst & Kultur</a>
                              </li>
                              <li class = "catParty">
                                  <a href="#">Party& Nachtleben</a>
                              </li>
                              <li class = "catSport">
                                  <a href="#">Sport</a>
                              </li>
                              <li class = "catKonzert">
                                  <a href="#">Konzert</a>
                              </li>
                              <li class = "catEssen">
                                  <a href="#">Essen & Trinken</a>
                              </li>
                          </ul>
                      </div>

http://jsfiddle.net/dgbn33pv/

但问题是，我想在单击按钮后将其保持为红色，而在我再次单击它后它会切换回灰色。这可以通过 css 实现，我可以检查按钮状态以过滤主要内容吗？

问候

Answer 1

可悲的是，CSS 没有 onclick 功能，您希望在 CSS 中最好的功能是 :active 但是一旦您释放鼠标按钮，一切都会恢复到其原始状态。这是 :active 的一个例子

<div id="button">
</div>

#button{
width:150px;
height:50px;
margin:50px auto;
background:#555;
}
#button:active{
background:#f00;
}

http://jsfiddle.net/dgbn33pv/