html - クリック時に境界線の色を変更する

Question

4 つの div ボックスで構成されるメニューがあります。アクティブなボックスに赤い枠を付けたいのですが、別のボックスをクリックすると枠が白くなり、他のボックスの枠が赤になります。JavaScript が必要ですか、それとも CSS で十分ですか?

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box{
margin: 10px;
float: left;
width: 100px;
height: 50px;
background-color: blue;
border: solid 1px red;
}

score 7 · Accepted Answer

クリックは状態を維持したい場合はJavaScript、ホバーはCSSでOKです。

クリックアンドホールドスタイルに使用できますdiv:active { /* style */ }が、マウスを離すと消えます。

これは、jQuery を使用した簡単な方法です。

$('.box').on('click', function(e){
  e.preventDefault();
  $(this).css('border-color', 'lime');
});

ただし、おそらくクラスを切り替える方が良いでしょう:

JS:

$('.box').on('click', function(e){
      e.preventDefault();
      $(this).toggleClass('myClickState');
    });

CSS:

.myClickState {
  border-color: lime;
}

score 1 · Accepted Answer

はい、:active擬似セレクターを使用してこれを実現できます。

これを試して：

.box:active {
    border-color: red;   
}

ただし、これはマウスを放した後は持続しません。

また、IE6 ではサポートされていません。

score 0 · Accepted Answer

この関数を見てください：

クリックイベントを適用し、CSS クラスを変更する方法を示します。境界線の色で目的のクラスを作成するだけです。

6 に答える 6