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實現，我可以檢查按鈕狀態以過濾maincontent嗎？

問候

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/

Answer 2

您可以使用jquery來做到這一點：

 $('#nav li').on('click', function() { $(this).toggleClass("active"); $(this).siblings().removeClass("active"); }); 

添加以下CSS：-

 #nav li.active{ background: red !important; }