Cevaplara yorum özelliği eklendi. Lütfen tartışmalar için yorumları kullanın. Tüm güncellemeler

Jquery Listeleme Bir Sonraki Elementi Aktif Etme

<div class="button left">
  <a href="javascript:void(0)" class="prev-button">İleri</a>
  <a href="javascript:void(0)" class="next-button">Geri</a>
</div>

<div class="whatsapp left">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
</div>


Merhaba ; Başlangıçta 1. aktif -ileri tıkladığımda 2 -geri tıkladığımda tekrar bir aktif olsun istiyorum.

Teşekkürler, kolay gelsin.


1

Cevaplar (1)

İşlem devam ediyor, lütfen bekleyin..
Melih YARIKKAYA
Doğru Cevap
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<style type="text/css">
	.active {
		display: block;	
	}
	.passive {
		display: none;
	}

</style>
<body>
	<div class="button left">
	  <a href="javascript:void(0)" onclick="next()" class="prev-button">İleri</a>
	  <a href="javascript:void(0)" onclick="previous()" class="next-button">Geri</a>
	</div>

	<div class="whatsapp left">
	  <a class="active" href="">1</a>
	  <a class="passive" href="">2</a>
	  <a class="passive" href="">3</a>
	</div>
	<script type="text/javascript">
		var currentActiveElement = 1;
		var elementCount = 3;

		function next(argument) {
			if(currentActiveElement >= elementCount)
				return;

			currentActiveElement++;
			render(currentActiveElement);
		}

		function previous() {
			if(currentActiveElement <= 1)
				return;
			currentActiveElement--;
			render(currentActiveElement);
		}

		function render(id) {
			$('.whatsapp a').each(function(index, element) {
				
				element = $('.whatsapp a:nth-child('+ (index+1) +')');

				if(index + 1 == currentActiveElement) {
					element.removeClass('passive');
					element.addClass('active');
				} else {
					element.removeClass('active');
					element.addClass('passive');
				}
			})
		}
	</script>
</body>
</html>

Çok basit bir örnek bu şekilde yapabilirsin.

İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın