Jquery 向下滚动 css 不工作

Question

好的，所以在解决消失的问题 () 之后，我遇到了一个新问题，我认为它与此问题有关。

当我单击 header link 时，页面向下滚动 Jquery 到正确的文章。这个功能很好用。但是另一个函数会更改页面上相应按钮的 css (scrolltop())。此功能也有效。但是当我点击按钮时，我的 css 没有改变。它使我的按钮变成白色 link，周围有灰色 "clicked" 边框（由浏览器完成）。只有当我单击屏幕上的其他任何地方（以删除 "active" 按钮状态）时，按钮才会改变颜色。

我无法用 JSFiddle (Fiddle) 复制问题，所以这里有一些描述上述问题的图片：

这是我的菜单：

这是我将鼠标悬停在菜单上的时间：

这是我选择的时候"over ons":

这是我取消选择按钮的时候：

现在的问题是，如何让我选择的按钮（图 3）与我未选择的按钮（图 4）相同 css？

这种风格text-decoration:none不起作用。使用 :active css 属性也不起作用。

我似乎无法在 Internet 上找到解决方案。我错过了什么吗？

解决方法

感谢 Drops 的回答！ :focus 成功了。以前从未听说过，但它确实有效。谢谢！

Answer 1

创建一个 class noSelect 并将其分配给所有这些按钮。这将防止它被突出显示

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

编辑如果是这种情况，请尝试设置

a:active {
    outline:none 
}

Answer 2

css 元素 :focus 是点击元素的答案。通过使用 .menuButton:focus 我设法设置了点击按钮的样式。

由于滚动和动态更改按钮样式（我的按钮根据页面位置获得活动状态）我还需要它在启动后立即删除焦点。

这可以通过以下方式完成：$(':focus').blur() (Jquery)。

积分进入 :focus 元素的 Drops。

Answer 3

你应该看看CSS伪class:focus，这里有docs.

This answer 会告诉你更多关于 :focus 和 :active 伪 class 之间的区别。

干杯。

Jquery 向下滚动 css 不工作

Jquery scrolldown css not working

html

css

jquery

selected