html - 为按钮添加事件状态

Question

我有一个用于 Web 应用程序控制的垂直导航栏。导航栏曾经是一个选择性工具栏。

因此，除了按钮的正常状态和悬停状态外，按下按钮时必须有事件状态。

Active 状态应该让按下的按钮变为较暗的背景颜色，直到按下其他按钮。

我该怎么做？有可能在 CSS 中完成吗？还是需要 jQuery？我刚刚在 CSS 中尝试了 li:active，但没有用。

下面是HTML:

<div class="navigation">
            <ul class="app_button" >
                <li><a href="XXX" class="app_button"><span>]</span>Function1</a></li>
                <li><a href="#" class="app_button"><span>]</span>Function2</a></li>
                  <ul class="sub_app_button">
                   <li><a  href="aaa">subfunction1</a></li>
                   <li><a  href="bbb">subfunction2</a></li>
                   <li><a  href="ccc">subfunction3</a></li>
                   <li><a  href="ddd">subfunction4</a></li>
                  </ul>
                <li><a href="#" class="app_button"><span>]</span>Function3</a></li>
                  <ul class="sub_app_button">
                   <li><a  href="eee" >subfunction5</a></li>
                   <li><a  href="fff" >subfunction6</a></li>
                  </ul>
            </ul> <!-- end:app_button -->
        </div> <!-- end:navigation -->

下面是CSS:

div.inner_page div.navigation  ul.app_button li{
   left:0;
   display: block;
   margin:0px;
   padding: 0;
}

div.inner_page div.navigation  ul.app_button li a 
{
    font-size:16px;
    display: block;
    width: 100%;
    padding: 8px 0px 6px 0px;
    color: #ffffff;
    text-decoration: none;
    background: #aaa;
    border-bottom:none;
    border-top:none;
}
div.inner_page div.navigation  ul.app_button li a:hover 
{    

    width: 150px;
    color: #9be163;
    background: #333333;
    top: 0px;
    border-bottom:none;
    border-top:none;

}

Answer 1

您可以使用 :active 伪选择器:

div.inner_page div.navigation  ul.app_button li a:active
{    
    background: #111;/*whichever color you prefer*/
}

现在你的按钮应该有一个更暗的 onClick 背景 :)