ホームページ > 記事 > ウェブフロントエンド > ヘルプ: a:active が機能しません。 ! _html/css_WEB-ITnose
次の CSS を使用して、メニューを選択した後、a:active スタイルを維持することを実現したいと考えています。
現在の問題は、マウスを押したときにスタイルが維持され、放したり遠ざけたりすると、a:link スタイルに戻ってしまうということです。
/*CSS スタイル*/
#menu ul li {background: #eef; border-bottom: 1px Solid #CCC; float:left;}
#menu ul li a {display:block; ; width:168px; line-height: 38px; float:left;}
#menu li a:link {background: #eef; color:#666;}
#menu li a:visited {background: #eef; color:#666;}
#メニュー ul li a:hover {background:#3ab3ec; font-size:14px; font-weight:bold;}
#menu ul li a:active {background:# 3ab3ec; フォントサイズ:#fff;
/*html コード*/
ff6d136ddc5fdfeffaf53ff6ee95f185 927622e3dbbfa7d0475d1bf828cd1738インストールに必須のもの5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb /a>bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6b5a63eb323562bbd99b282e6a2c94492アーケード ゲーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32 アドベンチャー ゲーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb #">ストラテジー ゲーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
686ec5a1aec70e6570f81a93bfd263e2アクション ゲーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
a href="#">レース ゲーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32チェス&カード ゲーム5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb Visited {background: #eef; color:#666;}、マウスが離れた後に実際に機能するのは
a:visited
そうです、投稿者はいくつかの疑似クラス表現の関数をよく調べています。
#menu ul li a:visited {background: #eef; color:#666;} なので、マウスを移動した後に実際に機能するのは
a:visited です
これはメニュー ナビゲーションであり、コンテンツは毎回変更されるためですはい、選択したメニューに従ってナビゲーション バーが a:active 時のスタイルに固定されることを望みます。アクセスした後もこのスタイルのままになることは望ましくありません。
これは疑似クラスを使用して実装できますか?
。 。 。アクティブとは、クリックされたときを意味します。LZ は、最初に疑似クラスが何を意味するかを確認してください。
#menu li a:visited {background: #eef; color:#666;} 、マウスを移動した後に実際に機能するのは
実際、この種の問題では、選択されていないナビゲーション メニューのスタイルを設定し、それを JavaScript を使用して実装します コードは次のとおりです
function selectTab(idx) { for (var i = 1; i <= 7; i++) { if (idx == i) { document.getElementById("TD" + i).className = "tabSelect"; } else { document.getElementById("TD" + i).className = "tabUnSelect"; } }}
@conan8126 ありがとうございます。 ! !