Есть код
<div id="pager_slider">
<section class="page1">
</section>
<section class="page2">
</section>
<section class="page3">
<h2>Grafic Design3</h2>
<p class="b_text"></p>
<p class="s_text"> </p>
</section>
<section class="page4">
</section>
</div>
<div id="progress_bar">
<div id="circles">
<div class="circle">
<strong></strong>
</div>
</div>
<div class="circle">
<strong></strong>
</div>
<div class="circle">
<strong></strong>
</div>
</div>
$(function(){
$('#pager_slider').cycle({
fx: 'scrollDown',
timeout: 0,
speed: 1000,
easing: 'easeOutCubic',
pager: '#nav_slider'
});
$(document.body).on("click", "#nav_slider a[href^='#']", function(){
$('#nav_slider a').addClass('noActive').removeClass('activeSlide');
$(this).addClass('activeSlide').removeClass('noActive');
});
$('#nav_slider a').addClass('detailsIcon').text('');
});
// circle progressbar for our_services
$(function(){
var c4 = $('.circle');
c4.circleProgress({
startAngle: -Math.PI /2 * 8 ,
lineCap: 'round',
value: c4.data("value"),
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
});
var progressBarArray1 = ["0.75","0.36","0.21"]
var progressBarArray2 = ["0.25","0.43","0.33"]
var progressBarArray3 = ["0.40","0.75","0.54"]
var progressBarArray4 = ["0.75","0.78","0.46"]
Как сделать, чтобы по клику в навигации, загружались к div.circle добавлялся атрибут data-value и загружались элементы из массива.
Т.е я нажимаю на первую кнопку в nav он загружает из первого массива значения и расставляет к первому элементу с классом circle первый элемент массива, ко второму второй, к третьему третий