仅单击的div应当具有不同的颜色

Question

我有4个div，我只希望单击的div更改边框颜色，但是如果单击另一个div则边框颜色将更改。 现在，单击以下按钮后颜色仍然存在：

jsfiddle

的HTML

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

JS

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

Answer 1

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

Answer 2

您可以从所有元素中删除css样式，并在每次单击时将其重新分配给当前元素。 这很简单，但是我更喜欢使用两个变量来保存当前元素和前一个元素对象，如下所示：

var cur;  //represents current element
var pre;  //represents previous element

$('.box').on('click', function (e) {
    e.preventDefault();
    if (pre) //checking for first time condition
        pre.css('border-color', 'red');  
    cur = $(this);
    cur.css('border-color', 'lime');
    pre = cur;  //assigning the current element to previous element
});

工作小提琴

吉普

Answer 3

试试这个： 现场演示 （阅读评论）

$('.box').on('click', function(e){
  $('.box').css('border-color', 'red');//set all borders value to the default
  e.preventDefault();
  $(this).css('border-color', 'lime');//change the selected border value
});

Answer 4

尝试这个

$(".box").click(function() {
   $(".box").removeClass("active");  // remove active class from all
   $(this).addClass("active");         // add active class to clicked
});

演示

Answer 5

这样尝试

$('.box').on('click', function(e){
$('.box').css({'border-color':'blue','border':'solid 1px red'});
$(this).css('border-color', 'lime');
});

观看演示

Answer 6

使用类的链接示例。

$(".box").click(function() {
   $(this).addClass("active").siblings('.box').removeClass("active"); 
});

http://jsfiddle.net/CkwQU/13/

Answer 7

您只需设置所有框的边框颜色，然后再设置新的边框颜色：

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

Answer 8

您可以使用以下代码执行此操作。

CSS：

div.box{
    width:100px;
    height:30px;
    background:#ccc;
    margin:3px;


}

.box.border{
    border:1px solid #ff0000;
}

JS：

$(".box").on("click", function () {
    if (!$(this).hasClass("border")) {
        $(".border").removeClass("border");
        $(this).addClass('border');
    }
});

此处演示-http: //jsfiddle.net/cb7mH/

Answer 9

这是我认为的正确方法

$('.box').on('click', function(e){
    e.preventDefault();
  // Lime color
  if($(this).css('border-left-color') == 'rgb(0, 255, 0)')
  {
   $(this).css('border-color', 'red'); 
  }
  else
  {
    $(this).css('border-color', 'lime');
  }
});

Answer 10

您需要重置所有其他div的边框。

  $('.box').css('border-color', 'red');

更新了你的小提琴..