html - 单击时更改边框颜色

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

Answer 2

function fnChangeBorder(boxId)

{document.getElementById(boxId).style.border = "solid #AA00FF";}

<div class="box" id="A" onclick="fnChangeBorder('A')">Click here !!</div>

我选择 A 作为参数，因为数字不能作为函数参数

Answer 3

尝试这个：

.box:focus{ border-color:#cd3232; }

Answer 4

是的，您可以使用:active伪选择器来实现这一点。

尝试这个：

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

但是，这在您释放鼠标后不会持续存在。

IE6 也不支持它。

Answer 5

看看这个函数：

http://jqueryui.com/addClass/

它展示了如何应用点击事件和更改 CSS 类。您只需创建一个具有边框颜色的所需类。

Answer 6

您可以通过 jQuery（此处为 JSFiddle）执行此操作：

$(document).ready(function() {
  $('.box').click(function() {
    if($('.active').length) {
      $('.active').not($(this)).removeClass('active').addClass('box');
    }      
    $(this).removeClass('box').addClass('active');     
  }); 
});