Merhaba değerli forum üyeleri,

javascript ile birden fazla buton kontrolü yapmaktayım ve tıklanan buton belirtilen değer ise aktif diğer butonlar pasif olacak. Bunun algoritması konusunda yardımcı olur musunuz?

Tekli seçim şeklinde yapmaya çalışıyorum. Bire bastıysa buton 1 aktif olacak, diğerleri pasif hale gelecek (Aynı class butonları mevcut, sadece attribute değeri atanmış).

Tıklamadan önce


Tıklamadan Sonra:

Buga giren kısım

Javascript kodları:

var elems = document.querySelectorAll('.serviceBtn');

		for (var i=elems.length; i--;) {
			elems[i].style.background = "#d6d6d6";
			elems[i].style.color = "#333";
			elems[i].addEventListener('click', fn, false);
		}

		function fn() {
			if ( this.getAttribute("data-service") == 'one' ) {
				this.style.background = "#2775ff";
				this.style.color = "#fff";
			}else if ( this.getAttribute("data-service") == 'two' ) {
				this.style.background = "#2775ff";
				this.style.color = "#fff";
			}else if ( this.getAttribute("data-service") == 'three' ) {
				this.style.background = "#2775ff";
				this.style.color = "#fff";
			}else if ( this.getAttribute("data-service") == 'four' ) {
				this.style.background = "#2775ff";
				this.style.color = "#fff";
			}else {
				this.style.background = "#d6d6d6";
				this.style.color = "#333";
			}
		}