JAVASCRIPT AKTİF BUTON UYGULAMASI

Selamlar...

Birden fazla sayfaya bölünmüş içeriklerde kullanılan sayfa numaralarında , hangi sayfada olduğuuzu gösteren basit bir javascript uygulaması yapalım..

Uygulamada butonlara tıklandığında , hangi buton tıklandıysa , farklı background ve yazı rengi alırken diğer butonlar normal görünümlerine döner. Bunu da farklı br class ataması yaparak gerçekleştireceğiz.

Bu Uygulamada Neler Var?

• Javascript Seçici Kullanımı
• Javascript for Döngüsü
• Javascript addEventListener Kullanımı
• Javascript ile Class Ekleme Çıkarma
• Javascript this anahtarı

Öncelikle bir kaç butonluk bir html sayfası hazırlayalım...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AKTİF BUTON</title>  
</head>
<body>
	<div class="container">
		<button class="active"> 1 </button>
		<button> 2 </button>
		<button> 3 </button>
		<button> 4 </button> 
		<button> 5 </button> 
		<button> 6 </button> 
	</div>
</body>
</html>

6 butonluk bir pagination hazırladık.. Şimdide CSS özelliklerimizi ayarlayalım... Ben sayfaya ortalamak için ekstra css özellikleri yazdım. Siz istediğiniz gibi özelleştirebilrsiniz. Ayrıca , butonların üzerine gelindiğinde verdiğim zemin ve yazı rengi değişikliğini aynı zamanda ".active" class'ınada ekledim. Sayfa açıldığında öncelikle 1. buton aktif olarak görünecektir.

<style>		
		* {margin: 0;padding: 0}
		body {
			width:100vw;height:100vh;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.container {
			width:50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rem;
			background-color: #111;
			border: 1px solid #000; 
		} 
		.container button {
			padding:1rem 1.5rem; 
			background-color: #ddd;
			color:#dd3a00;
			font-size:2rem;
			margin:0 .3rem;
			cursor:pointer;
			border: none;
			outline: none;
		}
		.container button:hover,.container button.active { 
			background-color: #dd3a00; color:#fff; 
		}
		@media(max-width:1000px) {
			html {font-size: 10px}
			.container{width:80%}
		}
</style> 

Gelelim javasript tarafına... önce mantığımızı kuralım... Sayfada 6 buton ve bit tane .active classı mevcut. Yapmamız gereken ,  "active" class'ını mevcut butondan alarak , tıkladığıız butona vermek. Tabi bunun için tüm butonlara bir tıklama olayı düşünmemiz gerekiyor. Bunu da , html kısmında butonlara tek tek onclick olayı vermek yerine, script içerisinde tüm butonları for döngüsüne alıp birer addEventListener() ile  sağlayabiliriz. Böylece her butonun click olayında, queryselector ile ulaştığımız .active class'lı butondan bu classı çıkararak, this anahtarı ile tıkladığımız butona aktarabiliriz.

<script>  
		butons=document.querySelectorAll("button"); // butonlar butons değişkenine alınıyor

		for (i=0;i<butons.length;i++) {		
	
			butons[i].addEventListener("click",function(){  //butonlara click fonksiyonu ekleniyor

				active=document.querySelector(".active"); //mevcut active class'lı buton
				active.classList.remove("active"); // mevcut active class'ı çıkarılıyor
				this.classList.add("active"); // tıklanan butona active class'ı ekleniyor

			}); 
		} 
</script>