Navigation scroll in Bullets

Question

Navigation scroll in Bullets

Navigation

#1 by (5 votes)
#2 by (0 votes)

10

I'm developing a one page scroll site and wanted every bullets I clicked to be active for the page I'm on. This is the example I'm doing the scroll script did not put in yet but wanted to leave the effect of clicking 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;    
    }

If my question is still unclear I have some examples:
Example 1
Example 2 Example 3

html jquery html5 css css3

asked by anonymous 18.02.2014 / 14:46

2 answers

0

Following the idea of adding a class to the active item, here is an example of how the code can be done with jquery. Let's give the bullet class to the 'a', in which case the code would be:

$('.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
});

18.02.2014 / 15:03

Change table users Auth Laravel 5.1 In programming, what is the actor model?

score 5 · Accepted Answer

You can add a .active class to your bullets by executing the event that you have by clicking them ( onClick ), but you have to remove the .active class from all of them too, so that are not all selected

What would be the following:

$('.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 .active class in your CSS:

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