我希望我的導航點在活動時發生變化

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;
}

然后將事件偵聽器添加到每個導航項，這將刪除當前類並將其添加到clicked元素：

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

這是演示