Question

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

因此，除按钮的正常状态和悬停状态外，按下按钮时必须处于活动状态。

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

我该怎么做？是否可以在CSS中完成？还是需要jQuery？我刚试过li：在CSS中活动但不起作用。

以下是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：）

Answer 2

为了解决您必须确保在页面刷新时，按钮被赋予实际的“活动”类别或类似，然后正确地设置样式。正如凯尔所写，这将不得不依靠你的cms，而不仅仅是css。

将活动状态添加到按钮

2 个答案: