Bir div'eTıklandığında İstediğim CSS'i Nasıl Aktif Ederim?

09-01-2019, 03:00:51

Merhabalar,

Mümkün olduğunu düşünüyorum ancak nasıl yapıldığını bilmiyorum. Acaba Bir div'e :hover ile reaksiyon verdiğimiz gibi tıkladığımızda da bir div'in display:none olmasını sağlayabilir miyiz?

Örnek bir kod yazacak olursam;

<div class="text"> Burada bazı yazılar var </div>
<div class="buton">Göster</div>

<style>
.text {color: #000000;background: #000000;}
</style>

botton'a tıklandığında şu css çalışsın;

.text {background: #ffffff;}

09-01-2019, 03:14:04

#2

hasansengun

İstediğin şey bu kadar kolay bir şey değil heralde ?

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: #000000;background: #000000;
}
a:active {
  background: #ffffff;
}
</style>
</head>
<body>

<a href="">test</a>
<a href="">test</a>


</body>
</html>

09-01-2019, 03:20:05

#3

~Aykut

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Merhabalar,

Mümkün olduğunu düşünüyorum ancak nasıl yapıldığını bilmiyorum. Acaba Bir div'e :hover ile reaksiyon verdiğimiz gibi tıkladığımızda da bir div'in display:none olmasını sağlayabilir miyiz?

Örnek bir kod yazacak olursam;

<div class="text"> Burada bazı yazılar var </div>
<div class="buton">Göster</div>

<style>
.text {color: #000000;background: #000000;}
</style>

botton'a tıklandığında şu css çalışsın;

.text {background: #ffffff;}

hover : uzerine geldiginde aktif oluyor.

focus: tıklandıgında

aynı sekılde focus ile yapabilirsin

09-01-2019, 04:03:38

#4

~~hasyer~~

Üyeliği durduruldu

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Merhabalar,

Mümkün olduğunu düşünüyorum ancak nasıl yapıldığını bilmiyorum. Acaba Bir div'e :hover ile reaksiyon verdiğimiz gibi tıkladığımızda da bir div'in display:none olmasını sağlayabilir miyiz?

Örnek bir kod yazacak olursam;

<div class="text"> Burada bazı yazılar var </div>
<div class="buton">Göster</div>

<style>
.text {color: #000000;background: #000000;}
</style>

botton'a tıklandığında şu css çalışsın;

.text {background: #ffffff;}

<html>
<head>
<style>.text {color:#000000;background:#ff0000;display:none;}</style>
</head>
<body>
<div id="yazilar" class="text" > Burada bazı yazılar var </div>
<div id="goster" class="buton" style="cursor:pointer;">Göster</div>
<script type="text/javascript">
document.getElementById('goster').addEventListener('click', function() {
var div = document.getElementById('yazilar');
if(div.style.display == 'none') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
});
</script>
</body>
</html>

09-01-2019, 06:28:24

#5

SkyGhostAir

hasansengun adlı üyeden alıntı: mesajı görüntüle

İstediğin şey bu kadar kolay bir şey değil heralde ?

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: #000000;background: #000000;
}
a:active {
  background: #ffffff;
}
</style>
</head>
<body>

<a href="">test</a>
<a href="">test</a>


</body>
</html>

Aslında değil, daha karmaşık bir yapı için kullanacağım ancak :active'yi unutmuştum. Şu şekilde kullandım ben projede:

.aurel_pf_video:active .aurel_pf_video_overlay {display: none}

Tema yapımcısı eksik kodlama yapmış, videoların üstündeki siyah ekranı kaldırmak için kullandım. Başlat butonuna tıklayınca ortadan kalkıyor.

~Aykut adlı üyeden alıntı: mesajı görüntüle

hover : uzerine geldiginde aktif oluyor.

focus: tıklandıgında

aynı sekılde focus ile yapabilirsin

Evet atlamışım ben bu detayları :hover'dan başka seçenekler de var, onlara baksaydım tüm mantığı kavrardım.

hasyer adlı üyeden alıntı: mesajı görüntüle

<html>
<head>
<style>.text {color:#000000;background:#ff0000;display:none;}</style>
</head>
<body>
<div id="yazilar" class="text" > Burada bazı yazılar var </div>
<div id="goster" class="buton" style="cursor:pointer;">Göster</div>
<script type="text/javascript">
document.getElementById('goster').addEventListener('click', function() {
var div = document.getElementById('yazilar');
if(div.style.display == 'none') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
});
</script>
</body>
</html>

Şunun için js kullanmaya hiç gerek yok valla hocam, alternatif çözüm ama bir satır css koduna bakıyor yapması.

09-01-2019, 10:28:06

#6

FSahin

Siz sorunu çözmüşsünüzdür muhtemelen ama daha sonra gelecek arkadaşlar için örnek olması adına jsfiddle'ı bırakayım. Hem :target metodu hem de :focus metodu ile paylaştım.

http://jsfiddle.net/ky9qf36w/

12-12-2021, 23:15:31

#7

~~shingeki~~

Üyeliği durduruldu

hasyer adlı üyeden alıntı: mesajı görüntüle

<html>
<head>
<style>.text {color:#000000;background:#ff0000;display:none;}</style>
</head>
<body>
<div id="yazilar" class="text" > Burada bazı yazılar var </div>
<div id="goster" class="buton" style="cursor:pointer;">Göster</div>
<script type="text/javascript">
document.getElementById('goster').addEventListener('click', function() {
var div = document.getElementById('yazilar');
if(div.style.display == 'none') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
});
</script>
</body>
</html>

hocam konu eski ama bi teşekkür etmek istedim harikasiniz