Untitled

<html>
<head>
<style type='text/css'>

a.link {width: 15px;height: 15px;background-color:blue;border-radius: 50px;position:absolute;}
a.link:hover {background-color: red}
a.link.active {background-color: red;}

.position1 {position: absolute;top: 100px;left: 50%;margin-left: -11.5px;}
.position2 {position: absolute;top: 200px;left: 50%;margin-left: -11.5px;}
.position3 {position: absolute;top: 300px;left: 50%;margin-left: -11.5px;}

</style>
</head>

<body>
<script type='text/javascript'>
            $(function() {
               $('a.link').click(function() {
                   $('a.link').removeClass('active');
                   $(this).addClass('active');
               })
            });
         </script>

  <div class="position1"><a class="link" href="#"></a></div>
  <div class="position2"><a class="link" href="#"></a></div>
  <div class="position3"><a class="link" href="#"></a></div>
</body>
</html>