Load div when clicked on list item

Question 1

You should put the code to animate the circle in a function that is called on (executed), when the list item is clicked... As $( document ).ready(function() means that your code should execute at the instant the page loads! :D

Example:

Code:

<!doctype html>

<html lang="en">

<head>

<title>Circle</title>
<script>
function skill()
{
    // the code to animate circle
    alert('animated circle!');
}
</script>
</head>
<body>
<div id="menu">

    <ul>
        <li><a href="#blok1">Home</a></li>
        <li><a href="#blok2">About</a></li>
        <li>
        <a onclick = "skill()" href="#blok3">
        Skills
        </a>
        </li>
        <li><a href="#blok4">Portfolio</a></li>
        <li><a href="#blok5">Contact</a></li>
        </ul>
</body>
</html>

Tested in: Firefox 24, Google Chrome 34

Update:
Since we don't have access to the circle animation code, we could completely remove it, and when Skills is clicked, we dynamically put it in using JavaScript's innerHTML .
Example:

<!DOCTYPE html>

<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<title>Circle</title>
<script>
function skill()
{
    var anim = document.getElementById('anim');
    anim.innerHTML = '<div id="myStat1" data-dimension="150" data-text="Ai" data-info=""   `data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div><div class="statistic-text">Illustrator</div>  ';`
    $('#myStat1').circliful();
    $('#myStat2').circliful();
    $('#myStat3').circliful();
    $('#myStat4').circliful();
    $('#myStat5').circliful();
    $('#myStat6').circliful();
}
</script>
</head>
<body>
<div id="menu">

    <ul>
        <li><a href="#blok1">Home</a></li>
        <li><a href="#blok2">About</a></li>
        <li onclick = "skill()">
        <a onclick = "skill()" href="#blok3">
        Skills
        </a>
        </li>
        <li><a href="#blok4">Portfolio</a></li>
        <li><a href="#blok5">Contact</a></li>
    </ul>
    <div class="statistic" id = "anim">
</div>
</body>
</html>

Question 2

Can you try this,

Javascript:

    $( document ).ready(function() {            
        Loadcircliful();
        $("#myskills").click(function(){
            Loadcircliful();
            return false;
        });
    });

    function Loadcircliful(){           
        $('#myStat1, #myStat2, #myStat3, #myStat4, #myStat5, #myStat6').circliful();
    }

in html,

    <li><a href="#blok3" id="myskills">Skills</a></li>

Question 3

may be this works for you...

in your html

  <li id="blok3"><a href="#blok3">Skills</a></li>

in your javascript

  $('#blok3').click(function () {  $('#myStat3').circliful(); });