Question

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

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

这就是我的主题：http://thinkagain.nu/?page_id=2501

我尝试实现某些相同的功能，我设法创建了一个浮动菜单，并添加了一些鼠标悬停样式的按钮（类似子弹/点的样式）。现在，当您单击全部时它完美运行，但它不会进入活动状态。

因此，在第一个项目中，第一个项目/点应该是白色，第二个项目使第二个项目符号变为白色等等，你得到了图片......

以下是使用的代码：

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

Answer 2

其余的代码是fyn，只需在ur js文件中添加此jquery代码（在使用代码之前也使用jquery lib）

$('#floatnav a').on('click',function() {
$('#floatnav a').removeClass('active');
$(this).addClass('active');
})

＆安培; css的一行：

 .active {    background:red;    }

这是现场直播：http://jsfiddle.net/3eBJ8/

关于浮动菜单中的活动状态需要一些帮助

2 个答案: