Artem_A,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<nav id="nav">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<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>
<script>
$(function(){
/*
$(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('');*/
});
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"];
var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];
// circle progressbar for our_services
$(function(){
var circles = $('.circle');
var lis = $('#nav li');
lis.on('click', function (li) {
var inx = $(this).index();
var i =0;
[].forEach.call(circles, function (el) {
$(el).attr('data-value',progressBarArrays[inx][i++])
});
})
});
</script>
</body>
</html>