Я хочу, чтобы мои навигационные точки менялись, когда они активны

Question

Я сделал боковую точку - навигация. Он отлично работает, за исключением активной точки. Я хочу, чтобы активная точка была заполнена, но я не могу заставить ее работать.

вот JSFiddle http://jsfiddle.net/R8f2j/

Я знаю, что нужно Javascript, но я попробовал несколько вещей из других учебников. Не могу понять, что мне нужно.

это HTML-

<div id="cbp-fbscroller" class="cbp-fbscroller"> 
<nav> 
<a href="#page1" class="cbp-fbcurrent">Handgemaakte meubelen door een Groninger vakman</a> 
<a href="#page2">De mogelijkheden</a> 
<a href="#page3">Restauratie</a> 
<a href="#page4">Het Proces</a> 
</nav> 
</div> 

<div id="page1">een</div> 
<div id="page2">twee</div> 
<div id="page3">drie</div> 
<div id="page4">vier</div> 

Это CSS

.cbp-fbscroller > nav { 
position: fixed; 
z-index: 9999; 
right: 50px; 
top: 50%; 
width: 10px; 
-webkit-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 
} 

.cbp-fbscroller > nav a { 
display: block; 
position: relative; 
z-index: 999; 
color: transparent; 
width: 10px; 
height: 10px; 
outline: none; 
margin: 10px 0; 
border-radius: 50%; 
border: 1px solid #666; 
} 

.cbp-fbscroller > nav a:hover { 
display: block; 
position: relative; 
z-index: 999; 
color: transparant; 
width: 10px; 
height: 10px; 
outline: none; 
margin: 10px 0; 
border-radius: 50%; 
border: 1px solid #d7d7d7; 
} 

#page1 { 
width: 100%; 
height: 400px; 
background-color: red; 
} 

#page2 { 
width: 100%; 
height: 400px; 
background-color: #98ffbc; 
} 

#page3 { 
width: 100%; 
height: 400px; 
background-color: #a5d1ff; 
} 

#page4 { 
width: 100%; 
height: 400px; 
background-color: #ffc1ff; 
} 

Answer 1

Сначала определите свой текущий класс CSS:

.cbp-fbcurrent { 
    background: #ffffff; 
} 

Затем добавить прослушиватель событий в каждая навигация м, который будет удалить текущий класс и добавить его в щелкнул элемент:

var currentClass = "cbp-fbcurrent", 
    navLinks = document.querySelectorAll('nav a'); 
for(var i = 0; i < navLinks.length; i++){ 
    navLinks[i].onclick = function(){ 
     var current = document.querySelector("." + currentClass) 
     current.className = current.className.replace(/(\s)?cbp-fbcurrent/ig, ""); 
     this.className += " " + currentClass; 
    }; 
} 

Пример: http://jsfiddle.net/R8f2j/3/

Answer 2

Вы можете сделать это с помощью JQuery, как это:

$('a').click(function(){ 
    $('a').removeAttr('style'); 
    $(this).css('background-color', 'yellow'); 
}); 

Вот demo