jquery - 需要一些帮助，关于 float 菜单中的事件状态

Question

这是我在这里发表的第一篇文章，我对开发还很陌生，但我会尝试一下

我正在我的投资组合网站上工作，这将是一个很长的页面，所以我想在侧面添加元素符号/圆点，这样您就可以很容易地浏览元素并查看您的位置。例如，向下滚动此站点 (http://discover.store.sony.com/be-moved/) 并查看右侧的元素符号/圆点。

这是我的 atm:http://thinkagain.nu/?page_id=2501

我试图实现一些相同的事情，我设法创建了一个 float 菜单并添加了某种具有鼠标悬停样式的按钮(样式如元素符号/点)。现在，当您单击所有按钮时，它可以完美运行，但不会进入事件状态。

因此，当第一个元素的第一个元素符号/点应该是白色时，第二个元素使第二个元素符号变为白色，依此类推...

这是使用的以下代码:

CSS

#floatnav {
  position: fixed;
  right: -50px;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

.bullit {
    background-color:#242424;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    border-radius:17px;
    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    padding:5px 5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    box-shadow: inset 1px 4px 9px -6px;
    box-shadow: 2px 2px 1px #888888; 
}
.bullit:hover {
    background-color:#ebebeb;
    box-shadow: inset 1px 4px 9px -6px;
}
.bullit:active {
    position:relative;
    top:1px;
}

HTML

<ul id="floatnav">
<a href="#cinerama" class="bullit"></a>
<a href="#magicalgems" class="bullit"></a>
<a href="#deltalloyd" class="bullit"></a>
<a href="#ezchef" class="bullit"></a>
</ul>

如果有人能帮助我或指出正确的方向，我将不胜感激!

提前致谢

编辑:

谢谢大佬!快到了……我还希望当您向下滚动每个内容部分时，圆点/元素符号变为事件状态。这可能吗？

Answer 1

使用 Jquery，您可以在单击元素符号时addClass()，试试这个:

$('#floatnav a').click(function() {
    $('#floatnav a').removeClass('active'); /*Remove previous*/
    $(this).addClass('active');             /*Active clicked*/
})

CSS 中的类:

.bullit.active {
  position:relative;
  top:1px;
  background:orange;
}

检查这个 Demo Fiddle