css - 当它成为焦点时样式化内部链接的 div

Question

当内部链接的 div 成为焦点时，有什么方法可以设置它的样式吗？就像说我在页面顶部有一个链接，我内部链接(<a href="samepage.html#more">)到页面下方的 div(<div id="more">)，当有人点击该 div 时，有没有办法设置它的样式以显示它的焦点(就像我可能会更改其背景颜色或在单击时给它一个边框)？这并不是真的像给它一个悬停样式，它更像是在激活或聚焦或类似的东西上给它样式。有什么办法吗？

我不确定是没有办法做到这一点，还是我太笨了而且有一个简单的方法，但到目前为止我还没有看到。谢谢。

Answer 1

您应该将 JavaScript 函数绑定(bind)到 window.onhashchange 事件:

window.onhashchange = function () {

    var hashloc = window.location.hash;

    // hashloc is a string like '#focusDiv'
    // .. manipulate DOM

};

这个微型工作 jsFiddle示例使用 jQuery，并在发生哈希更改事件时将 CSS 类添加到焦点 DIV。

事件使用纯 JS 绑定(bind)，因为 jQuery 本身不提供此 Hook ，正如 Matt 指出的那样，旧浏览器可能根本不支持它。为了解决这个问题，我强烈推荐 this jQuery plugin用于简单的哈希事件。