Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

Yazılım Soruları

0

Verdiğim id leri js ile bulma

Merhaba arkadaşlar,

Sayfamda sıralı şekilde divler var ve divlerin id leri var.

Ekranı aşağı doğru kaydırırken başka bir id li dive geçtiysem navbarda o idye bağlı butonun rengininin değişmesini istiyorum.

Nasıl yapabilirim?

1 Cevap

0
çıklamalarını daha sonra yazacağım.

Bu örnek div'in yarısı göründüğünde ilgili tuşu vurgular.

<html>
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<style>
		.sBaslik {
			position:fixed;
			left:0px;
			top:0px;
			height:30px;
			background:white;
			width:100%;
		}
		.sBaslik button {
			background-color:#fafafa;
			margin-right:3px;
		}
		.sBirDiv {
			margin:10px 0px 10px 0px;
			background:silver;
			min-height:700px;
		}
	</style>
</head>
<body>
<div class='sBaslik'>
	<button id="btn_KTest1" class="sUstButton">Button 1</button>
	<button id="btn_KTest2" class="sUstButton">Button 2</button>
	<button id="btn_KTest3" class="sUstButton">Button 3</button>
	<button id="btn_KTest4" class="sUstButton">Button 4</button>
</div>
<div style="margin-top:30px">
	<div id="dv_KTest1" class="sBirDiv"></div>
	<div id="dv_KTest2" class="sBirDiv"></div>
	<div id="dv_KTest3" class="sBirDiv"></div>
	<div id="dv_KTest4" class="sBirDiv"></div>
</div>
<script>
function kontrol() {
	var dvs = document.querySelectorAll(".sBirDiv");
	for (var i=0; i<dvs.length; i++) {
		var el = dvs[i];
		var bcr = el.getBoundingClientRect();
		if ((bcr.top <= window.innerHeight && bcr.bottom >= bcr.height / 2)) {
			
			Array.from(document.querySelectorAll(".sUstButton")).forEach(btn=>btn.style.removeProperty("background-color"));
			
			document.querySelector("#" + el.id.replace(/dv_K/, "btn_K")).style.backgroundColor = "#aaaaaa";
			break;
		}
	}
}

function baslat() {
    document.addEventListener("scroll", kontrol);
    window.addEventListener("resize", kontrol);
    window.addEventListener("load", kontrol);
    window.addEventListener("orientationchange", kontrol);
    kontrol();
}

document.addEventListener("DOMContentLoaded", baslat);

</script>
</body>




Cevaplayan: 16.09.20 13:00
cevapsitesi
101,757p 12ü
Cevabı seçen: 16.09.20 17:49
cevapsitesi   101,757p 12ü