8

ここに私のhtmlコードがあります

<div id="menus">
    <ul>
        <li><a href="HomePage.html">Home</a></li>
        <li><a href="#">Users</a></li>
        <li><a href="#">Project Manage</a></li>
        <li><a href="#">Transaction</a></li>
        <li style="border-right:none;"><a href="#">Logout</a></li>
    </ul>
</div>

ここに私のCSSがあります

#menus li
{
    float:left;
    list-style-type: none;
    padding-left: 25px;
    padding-right: 25px;
    border-right:groove 1px #FFFFFF;
    background: #666666;
}

#menus li:hover
{
    background: #999999;
}

#menus li a
{
    font-size:24px;
    text-decoration:none;
    color:#FFFFFF;
}

#menus li a:hover
{
    color:#000000;
}

ユーザーがliをクリックしたときにcssを変更したい（現在選択されているディスプレイのように）。cssのみを使用してこれを行うことはできますか?? はいの場合、どのように??

前もって感謝します..

4

2 に答える 2

12

focusとを使用するだけでCSSでそれを行うことができますtabindex

デモhttp://jsfiddle.net/kevinPHPkevin/LstNS/4/

li:focus  {
  background: red;
  outline: 0;
}

「アクティブな」メニュー項目ソリューションを採用する良い方法はこれです

デモhttp://jsfiddle.net/kevinPHPkevin/LstNS/6/

ソース: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

于 2013-08-29T18:42:34.663 に答える
3

いいえ、これだけではできませんcss。私は何を言うべきかよくわかりません...

特定のページをアクティブにしたい場合は、バックエンドに別のクラスを配置します。例:

<a href="#" class="active"></a>
于 2013-08-29T18:36:18.920 に答える