2

みんな私は他の人のコードを使って作業していて、問題のナビゲーションに「アクティブな状態」を表示させる方法を考えていました。つまり、そのページのナビゲーションアイテムをアクティブにして、異なるbgカラー/テキストカラーを表示するにはどうすればよいですか？これがCSSとHTMLです。簡単ですが、このアクティブな状態を機能させる方法がわかりません。

CSS：

.menu {width:100%; margin:0; padding:0;}
.menu a.menuitem {
    font-size: 10px;
    font-weight: bold;
    color: #a7a7a7;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    border-bottom: 1px solid #ffffff;
    margin: 0;
    padding: 4px 10px 4px 10px;
    text-decoration: none;
}
.menu a.menuitem:visited, .menu .menuitem:active {color:#9ca1a6; text-decoration: none;}




.menu a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/position:absolute; top:5px; right:5px; border: none;}
.menu a.menuitem:hover {
    background: #6dd0f7;
    color: #fff;
    text-decoration: none;
}


.menu div.submenu { /*DIV that contains each sub menu*/ width:auto; margin:0; padding:0;}

.menu div.submenu ul { /*UL of each sub menu*/ list-style-type:none; font-size:12px; margin:0; padding:0;}

.menu div.submenu ul li{border-bottom:1px solid #AFAFAF; line-height:12px; margin:0; padding:0;}

.menu div.submenu ul li a{display:block; font-size:12px; color:#383838; text-decoration: none; margin:0; padding:5px 10px 5px 20px;}

.menu div.submenu ul li a:link {color:#383838; text-decoration:none;}

.menu div.submenu ul li a:visited {color:#383838; text-decoration:none;}

.menu div.submenu ul li a:active {background:#D7EEFF; color:#0164B5; text-decoration:none;}

.menu div.submenu ul li a:hover {background:#D7EEFF; color:#0164B5; text-decoration:none;}


HTML:

         <div class="menu">
            <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a>
            <a class="menuitem submenuheader" href="">Messages (241)</a>
            <a class="menuitem submenuheader" href="">Account Settings</a>
            <a class="menuitem submenuheader" href="">Fees & Activities</a>
            <a class="menuitem submenuheader" href="">Notifications</a>
            <a class="menuitem submenuheader" href="">Contact Support</a>
          </div>
4

2 に答える 2

2

:activecssセレクターは、リンクをクリックしたとき（マウスダウン）にのみリンクを選択します。ここを参照してください。

現在のページのナビゲーションアイテムを別の方法で表示するには、そのリンクにクラスを追加し、そのクラスにスタイル定義を追加する必要があります。例えば：

<a class="menuitem submenuheader active" href="">Messages (241)</a>

そしてそれを次のようにスタイリングします：

.menu a.active { /* your definitions */ }

于 2013-02-11T19:39:03.067 に答える
0

「現在の」クラスを作成し、現在表示されている要素に設定します。

CSS の例

div.menu a.current {
    color: #fff !important;
    text-decoration: none;
    background: #6dd0f7;
}

HTML

<div class="menu">
            <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a>
            <a class="menuitem submenuheader current" href="">Messages (241)</a>
            <a class="menuitem submenuheader" href="" class="current">Account Settings</a>
            <a class="menuitem submenuheader" href="">Fees & Activities</a>
            <a class="menuitem submenuheader" href="">Notifications</a>
            <a class="menuitem submenuheader" href="">Contact Support</a>
</div>

Jsfiddle: http://jsfiddle.net/XcmaD/

于 2013-02-11T19:40:35.463 に答える