html - css でアクティブな状態を維持する

Question

ログインフォームを作成していて、JavaScript で状態の非表示/表示を行っています。

ページをロードすると、最初のボタンがアクティブ状態になり、別のボタンをクリックするとアクティブになり、前のボタンがアクティブでなくなる方法はありますか?

私のHTML：

<a class="login-button" >login</a><a class="login-button">register</a><a class="login-button">cant login?</a>

私のCSS：

.login-button
{color:#00BFFF;
padding-right:20px;
}
.login-button:active
{ color:#FFF;
font-family:customfont-bold;
}

score 2 · Accepted Answer

@Sachinが指摘するようにJavaScriptを使用するか、疑似クラスを使用して純粋なCSS:targetで実行できます。

アンカータグにハイパーリンク参照 ( href) を追加するだけで、マークアップがより意味のあるものになると思います。

HTML

<a href="#login" id="login" class="login-button">login</a>

CSS

#login:target {
  color:#FFF;
  font-family:customfont-bold;
}

質問をcss / htmlと同じようにタグ付けしたので、CSSソリューションがいいと思いました。

score 1 · Accepted Answer

これを実現するには、Javascript または Jquery を使用できます。ここにあなたのためのサンプルがあります

$("a").click(function() {
    $("a").removeClass("active");
    $(this).addClass("active");
});

CSS

.active
{ 
  color:#FFF;
  font-weight:bold;
}

もちろん、より具体的にセレクターを使用できます。

3 に答える 3