0

Web アプリケーション コントロール用の垂直ナビゲーション バーがあります。ナビゲーション バーは、選択的なツールバーとして使用されます。

したがって、ボタンの通常の状態とホバー状態を除き、ボタンが押されている間は Active 状態である必要があります。

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

ページの更新時にボタンに「アクティブ」などの実際のクラスが与えられ、適切にスタイルが設定されていることを確認する必要があることを理解するために。Kyle が書いたように、これは CSS だけではなく、CMS に依存する必要があります。

于 2012-09-14T07:21:55.230 に答える