2014-11-21 30 views
10

Bu yüzden bir div var, tıklandığında ne renk değiştirmek istiyorum. Ben tüm üzerinde üç divs var ve ben üzerinde tıklayarak aktif bir div olduğunu belirtmek istiyorumYalnızca arka plan rengini değiştir css 'i kullanarak klikleyin.

Temelde CSS aktif özelliğini kullanmak istiyorum ancak fare yukarı olduğunda belirli bir div değişikliği yok. Odak gibi sırala. O

İşte yararlıdır html bir örnek olup olmadığını da ön yükleme alanı kullanıyorum

<div> 
    Section 1 
</div> 
<div> 
    Section 2 
</div> 
<div> 
    Section 3 
</div> 
i javascript kullanmadan bunu gerçekleştirmek nasıl

herkes söyler misiniz?

+1

yapıldığını ama bu bulunması istendiği takdirde bilmiyordum: http://tympanus.net/codrops/2012/12/17/css-click-events/ - bir deneyin? – ochi

+0

[etkin (seçili), vurgulu ve etkin olmayan sekme/div css mantığı] olası kopyası (http://stackoverflow.com/questions/6177636/activeselected-hover-and-inactive-tab-div-css-logic) –

+2

I Eğer [burada] cevabını bulabilir [1] [1]: http://stackoverflow.com/questions/19260401/change-background-on-button-click-using-css-only – Ehsan

cevap

20

tabIndex ekleyerek şablonu DIV'leri odaklanabilir olun:

<div tabindex="1"> 
Section 1 
</div> 

<div tabindex="2"> 
Section 2 
</div> 

<div tabindex="3"> 
Section 3 
</div> 

Sonra yapabilirsiniz basit kullanım :focus sözde sınıfı

div:focus { 
    background-color:red; 
} 

Demo: http://jsfiddle.net/mwbbcyja/

+0

sayfada odaklanabilecek başka öğeler olmadıkça çalışır. – dave

+0

Diğer öğeye tıklarsanız - DIV, odağı kaybedecek ve özgün stili geri yükleyecektir. Bu amaçlanan bir davranış değilse, OP ayrıntılı olmalıdır. –

+0

Ben bunu denedim ve dave gibi sayfada işe yaramadığı gibi başka şeyler olduğu sürece dedi. Teşekkürler –

-3

bu

kullanma deneyin
div .active { 
    background-color:blue; 
    } 
+2

Bu sorulan şeyi yapmaz: "* tıkladığınızda *". "aktif" * aynı şey değil *. –

0
div:focus { 
    background-color:'color'; 
} 
+2

StackOverflow'a hoş geldiniz. Cevabınızın oyu alması muhtemel. Nedenini bilmek için [** Nasıl iyi bir cevap yazabilirim? **] (https://stackoverflow.com/help/how-to-answer) okuyun. –

İlgili konular