0

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

}
4

2 回答 2

2

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

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

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

于 2012-09-14T06:21:21.657 回答
1

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

于 2012-09-14T07:21:55.230 回答