點擊更改邊框顏色

我有一個由4個div框組成的菜單。我想活動框有一個紅色的邊框，如果另一個框被點擊，邊框是白色的，另一個框的邊框是紅色的。我需要JavaScript還是CSS足夠？點擊更改邊框顏色

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

來源

2013-05-30 kaputu

你可能需要JavaScript，如果僅僅是因爲'div'默認是不可點擊的。 – showdev

因爲點擊你需要javascript yeh，懸停是可以的css –

對於點擊，如果你想保持狀態，你需要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; 
}

來源

2013-05-30 22:35:46

是的，你可以使用:active僞選擇實現這一目標。

試試這個：

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

然而，這不會鬆開鼠標後持續存在。

它在IE6中也不受支持。

來源

2013-05-30 22:34:42 Axel

但是鼠標上移後邊框的變化不會持續：http://jsfiddle.net/CkwQU/1/ – showdev

不，它不會。如果目標是永久更改元素，他應該使用javascript將該類應用於該元素。 – Axel

看看這個功能：

http://jqueryui.com/addClass/

它顯示瞭如何應用點擊事件並更改CSS類。你只需要用邊框顏色創建一個理想的類。

來源

2013-05-30 22:37:27

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

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

來源

2013-05-30 22:56:42

function fnChangeBorder(boxId) 
 

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

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

我選擇了作爲一個參數，因爲號碼將不能作爲函數參數工作

來源

2015-12-21 20:55:45

點擊更改邊框顏色

回答

相關問題