Question

我做了一个侧面导航。除活动点外，它工作正常。我希望填充活动点，但我不能让它工作。

我知道我需要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

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

2 个答案: