Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67469

I want to change the class of one of the bubbles navigation to active

$
0
0

I want to change the one of the bubbles navigation to active when a div class is active with background image as style. Here is the sample code

jQuery(document).ready(function() {
	var i=0; 
	var ba=['#screen0','#screen1','#screen2','#screen3','#screen4','#screen5','#screen6','#screen7','#screen8'];
	var id_0= $('#screen0');
	var id_1= $('#screen1');
	var id_2= $('#screen2');
	var id_3= $('#screen3');
	var id_4= $('#screen4');
	var id_5= $('#screen5');
	var id_6= $('#screen6');
	var id_7= $('#screen7');
	var id_8= $('#screen8');
	var id_9= $('#screen9');
	function checkk(){
		if($('#screen_1').attr('class', 'swiper-slide swiper-slide-active'))
	{	
		console.log('screen_1 is active');
		for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen0').attr('class', 'active');
	}
	else if($('#screen_2').attr('class', 'swiper-slide swiper-slide-active'))
	{	
		console.log('screen_2 is active');
		for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen1').attr('class', 'active');
	}
	else if($('#screen_3').attr('class', 'swiper-slide swiper-slide-active'))
	{
			console.log('screen_3 is active');
		for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen2').attr('class', 'active');
	}
	else if($('#screen_4').attr('class', 'swiper-slide swiper-slide-active'))
	{
		console.log('screen_4 is active');
		for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen3').attr('class', 'active');
	}
	else if($('#screen_5').attr('class', 'swiper-slide swiper-slide-active'))
	{console.log('screen_5 is active');
			for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen4').attr('class', 'active');
	}
	else if($('#screen_6').attr('class', 'swiper-slide swiper-slide-active'))
	{console.log('screen_6 is active');	
		for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen5').attr('class', 'active');
	}
	else if($('#screen_7').attr('class', 'swiper-slide swiper-slide-active'))
	{	
			console.log('screen_7 is active');	
			for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen6').attr('class', 'active');
	}
	else if($('#screen_8').attr('class', 'swiper-slide swiper-slide-active'))
	{		console.log('screen_8 is active');	
			for(i=0; i<ba.length; i++){
			ba[i].removeClass('active');
		}
		$('#screen7').attr('class', 'active');
	}
	else if($('#screen_9').attr('class', 'swiper-slide swiper-slide-active'))
	{		console.log('screen_9 is active');	
			for(i=0; i<ba.length; i++)
			{
			ba[i].removeClass('active');
			}
		$('#screen8').attr('class', 'active');
	}
	}
	setTimeout(checkk(), 50);
	// Stall the bubble and content changing for just 300ms
});
<div class="swiper-slider-area"><div class="container"><div class="row appScreenshotCarousel-container swiper-container"><div class="screen-mobile-image"></div><div class="swiper-wrapper"><div class="swiper-slide" id="screen_1" style="background-image:url(img/screenshot_1.png)"></div><div class="swiper-slide" id="screen_2" style="background-image:url(img/screenshot_2.png)"></div><div class="swiper-slide" id="screen_3" style="background-image:url(img/screenshot_3.png)"></div><div class="swiper-slide" id="screen_4" style="background-image:url(img/screenshot_4.png)"></div><div class="swiper-slide" id="screen_5" style="background-image:url(img/screenshot_5.png)"></div><div class="swiper-slide" id="screen_6" style="background-image:url(img/screenshot_7.png)"></div><div class="swiper-slide" id="screen_7" style="background-image:url(img/screenshot_8.png)"></div><div class="swiper-slide" id="screen_8" style="background-image:url(img/screenshot_9.png)"></div><div class="swiper-slide" id="screen_9" style="background-image:url(img/screenshot_10.png)"></div></div><!-- Add Arrows --></div><!-- </div> --></div><!-- End container --></div><!-- End swiper-slider-area --><div class="bubbles"><div class="bubble" id="screen0"></div><div class="bubble" id="screen1"></div><div class="bubble" id="screen2"></div><div class="bubble" id="screen3"></div><div class="bubble" id="screen4"></div><div class="bubble" id="screen5"></div><div class="bubble" id="screen6"></div><div class="bubble" id="screen7"></div><div class="bubble" id="screen8"></div></div>

In the above snippet I have a phone modal as an image inside which a screenshot is placed and it changes to next image when user slides the active image to left or right. based on this action I want to change the bubble color to dark using Jquery. I have tried using div id and the change the bubble class to active but no result.


Viewing all articles
Browse latest Browse all 67469

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>