CSS - 類似「已點擊」屬性？

Question

所以我想當用戶點擊一個div，另一個div改變顏色。對於我：

CSS

.div1, .div2{ background: blue; } 
    .div1:active + .div2 { background: red; } 

HTML

<div class="div1">Some text</div> 
<div class="div2">Other text</div> 

就這樣，當用戶點擊DIV1，在DIV2變化的背景，但只有當用戶仍然在鼠標按下。

我想製作類似:visited屬性，其中用戶在div1中單擊一次，並且div1保持顏色已更改。

Answer 1

可以使用checkbox hack

HTML：

<input type="checkbox" id="toggle"> 
<label for="toggle"><div class="div1">Some text</div></label> 
<div class="div2">Other text</div> 

的CSS：

input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
.div1, .div2{ 
    background: blue; 
    } 
#toggle:checked ~ .div2{ 
    background: red; 
} 

jsfiddle

Answer 2

1. 表示按下鼠標左鍵，你需要這樣的：http://api.jquery.com/mousedown/

2. 連同一些http://api.jquery.com/css/你可以實現你所需要的。

如果你把你的代碼放在jsfiddle中，我可以幫你。

Answer 3

試試這個

<div class="div1" onclick="style.backgroundColor = '#ff0000';" >some text</div> 
<div class="div2">Other text</div> 

Answer 4

你可以使用js函數用於這一目的..

function change_color() 
{ 
document.getElementById('change').className = 'active'; 
} 

CSS

.div{ background: blue; } 
.active{ background: red; } 

htnl

<div class="div" id="click" onclick="change_color()">Some text</div> 
<div class="div" id="change">Other text</div> 

Answer 5

如果不通過IE大驚小怪，那麼你可以做的以下：

http://jsfiddle.net/seemly/8NgpS/

HTML：

<div class="div1">Some text</div> 
<div class="div2">Other text</div> 

CSS：

div { 
    width:200px; 
    height:200px; 
} 
.div1 { 
    background:#c00; 
} 
.div2 { 
    background:#0c0; 
} 
.div1:active + div { 
    background:#00c; 
}