Scroll navigation in Bullets

Question

I am developing a one page scroll website and wanted each link and (Bullets) I clicked was active for the page I am. That’s the example I’m making the scroll script did not put yet but wanted to leave the effect of clicking on the (Bullets) ready.

<nav class="nav">
<ul>
 <li><a href="#">LOCALIZAÇÃO</a></li>
     <li><a href="#">PROJETOS</a></li>
     <li><a href="#">APARTAMENTOS</a></li>
     <li><a href="#">LAZER</a></li>
</ul>
<div class="bg_bullets">
    <a href="index.html" class=""><div class="bullets_one active"> </div> </a>
    <a href="#" class=""><div class="bullets_two active"> </div> </a>
    <a href="#" class=""><div class="bullets_three active"> </div> </a> 
    <a href="#" class=""><div class="bullets_four active"> </div> </a> 
 </div>  

</nav>

#header-container .nav {
position: absolute;
top: 32px;
letter-spacing: 1px;
left:167px;
}
.header-container .nav li {
    font-size: 14px;
    float: left;
    text-transform: uppercase;
    margin-right: 5px;
    }
#header-container .bg_bullets{
top:40px;
position:absolute;

background:url(../IMAGES/bg_bulets.png) no-repeat;
width:590px;
height:30px;
    }
#header-container .bullets_one{
float: left;
width: 16px;
height: 16px;
margin-right: 120px;
background: #FFF;
border-radius: 50%;
border: 3px solid #D7D8DA;
transition: all 0.4s ease;
margin-top:-6px;    
margin-left:10px;
position:absolute;
    }
#header-container .bullets_one:active{
background:#CC9;    
    }
#header-container .bullets_one:hover, #header-container .bullets_three:hover, #header-container .bullets_four:hover {
background:#CC9;    
    }

In case my question is still confused I have some examples:
Example 1
Example 2
Example 3

Answer 1

You can add a class .active to their bullets when executing the event you have by clicking them(onClick), but you have to remove the class .active of all of them too, so that they don’t all get selected

Which would be next:

$('.bg_bullets a div').click(function(){
  $('.bg_bullets a div').each(function(){
    $('.bg_bullets a div').removeClass('active');
  }); //remove todas as classes active dos bullets.
  $(this).addClass('active'); //adiciona classe active no elemento clicado
}); //evento do clique , provavelmente você já tem um porem pode usar dessa forma se quiser.

Then you have to declare your class .active in your CSS:

.active {
 background: none repeat scroll 0 0 #CCCC99; //peguei teu hover como exemplo
}

Answer 2

Following the idea of adding a class to the active item, follow an example of how code can be done with jquery. Let’s give the Bullet class to the 'a', in which case I would say:

$('.bullet').click(function() { // seria melhor colocar uma classe padrão para esse 'a'
  $('.bullet').removeClass('active'); // remove a classe 'active' de todos
  $(this).addClass('active'); // adiciona a classe 'active' para o item selecionado
});

Answer 3

$('.bg_bullets a div').click(function(){
  $('.bg_bullets a div').each(function(){
    $('.bg_bullets a div').removeClass('active');
  }); //remove todas as classes active dos bullets.
  $(this).addClass('active'); //adiciona classe active no elemento clicado
}); //evento do clique , provavelmente você já tem um porem pode usar dessa forma se quiser.

.active {
 background: none repeat scroll 0 0 #CCCC99; //peguei teu hover como exemplo
}