点击更改边框颜色

Question

我有一个包含4个div盒的菜单.我希望活动框具有红色边框,如果单击另一个框,则边框为白色,另一个框的边框为红色.我需要JavaScript还是CSS？

jsfiddel div

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;
}

Answer 1

如果你想维持状态,你需要JavaScript,使用CSS可以悬停.

您可以使用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;
}