jQuery addClass example

Change class name on click in jQuery

HTML

<div class="inner">

<div class="cirlec-slider-bg">
  <div class="f-courses">1</div>
  <div class="f-courses">2</div>
  <div class="f-courses">3</div>
  <div class="f-courses">4</div>
  <div class="f-courses">5</div>
  <div class="f-courses">6</div>
  <div class="f-courses">7</div>
  
 
</div>

</div>

CSS

.inner {
  width: 100px;
  height: 200px;
  overflow: hidden;
  margin: 60px auto ;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  float: left;
}
.cirlec-slider-bg {
  position: relative;
  width: 200px;
  height: 200px;
 position: relative;
 left: -120px;
  background: #000;
      border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;

}
.f-courses {
  position: absolute;
  width: 40px;
  height: 40px;
  background: green;
  transition: all 0.3s linear;
  position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 1s ease-out;
    border-radius: 100%;
    text-align: center;
    line-height: 40px;
}

JavaScript

// rotate circle functions
var p = $(".cirlec-slider-bg");
$(".cirlec-slider-bg .f-courses").clone().appendTo(p);

var a = -($('.cirlec-slider-bg').width()/2);
var b = $('.cirlec-slider-bg .f-courses').length;
var c = 360/b;
rotateCircle (c,'domReady');

$(".cirlec-slider-bg").on("click", ".f-courses", function(e) {
	if ($(this).hasClass('active')) {
	} else {
	$('.cirlec-slider-bg .f-courses').removeClass("active");
		$(this).addClass('active');
		var dataAngle = parseInt($(this).attr('data-angle'));
   dataAngle -= Math.floor(dataAngle / 360.0) * 360;
		var maxangle = 90 - dataAngle;

		rotateCircle (maxangle,'onitemClick')
}

});
function rotateCircle (maxangle,type) {
$('.cirlec-slider-bg .f-courses').each(function(index){

if (type == 'onitemClick') {
var maxAngle = maxangle;
var dataAngle2 = parseInt($(this).attr('data-angle'));
var maxangle2 = dataAngle2+maxAngle;
var d = (index)*c;
} 
if (type == 'domReady') {
var maxAngle = maxangle;
var maxangle2 = (index)*maxAngle;
}

	 var m =["translate(-50%, -50%) rotate(", -90, "deg) translateY("+a+"px) rotate(", 90, "deg)"];
  m[1] = maxangle2;
  m[3] = 0 - maxangle2;
  $(this).css({
    "transform": m.join("")
  });
  $(this).attr('data-angle',maxangle2);
})
}