我希望我的导航点在活动时更改

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