只有點擊的div纔會有不同的顏色

Question

我有4個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").click(function() { 
    $(".box").removeClass("active"); // remove active class from all 
    $(this).addClass("active");   // add active class to clicked 
}); 

DEMO

Answer 2

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

Answer 3

你只需要之前設置的所有框的邊框顏色你設置了新的邊框顏色：

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

Answer 4

試試這個：Live DEMO（閱讀評論）

$('.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 5

您可以從所有元素中刪除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 
}); 

Working Fiddle

JSPERF

Answer 6

嘗試這樣

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

See Demo

Answer 7

您需要重置所有其他的div的邊界。

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

已經更新了你擺弄..

Answer 8

一個使用類鏈的例子。

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

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

Answer 9

你可以用下面的代碼做到這一點。

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 10

這是正確的方式，我認爲

$('.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'); 
    } 
});