點擊更改邊框顏色

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

是的，您可以使用:active偽選擇器來實現此目的。

嘗試這個：

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

但是，釋放鼠標后，這將不會持續存在。

IE6也不支持它。

Answer 3

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

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

我選擇A作為參數，因為數字不能用作函數參數

Answer 4

看看這個功能：

http://jqueryui.com/addClass/

它顯示了如何應用click事件並更改CSS類。 您只需創建一個帶邊框顏色的所需類。

Answer 5

你可以通過jQuery（ JSFiddle here ）來做到這一點：

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

Answer 6

嘗試這個：

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