将按钮添加到工作状态

我有一个用于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; 

}

来源

2012-09-14 SH JONG

可以使用:active伪选择：

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

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

来源

2012-09-14 06:21:21 Kyle

嗨，凯尔。谢谢！但由于某些原因，按钮设计属于div.inner_page。如果按下一个按钮，整个页面将被刷新。整个页面刷新后，我必须保持这种按钮保持活动状态。有没有其他的方式来做活动状态？ –

您可能需要做一些后端乐趣才能获得这种功能，而标准HTML/CSS无法实现。 – Kyle

为了达到这个目的，你必须确保页面刷新后，按钮被赋予一个实际的“主动”或类似的类，然后正确地设计它。正如凯尔写道，这将不得不依靠你的CMS，而不是单独的CSS。

来源

2012-09-14 07:21:55 prezes

将按钮添加到工作状态

回答

相关问题