javascript - 在页面(哈希)链接中，获取第一个可见元素

Question

我有一个部分 View ( Handlebars html 模板)，其中有一个用于桌面的 html 和一个用于移动设备的 html。我只是使用不同的 css 类相应地隐藏它。

<div class='hideOnMobile showOnDesktop'>
  <a name='manuals' href='#'>Manuals</a>
  <!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
  <a name='manuals' href='#'>Manuals</a>
  <!-- Extra html for Mobile presentations -->
</div>

我的 CSS 的重要部分基本上是使用媒体查询隐藏和显示元素:

@media only screen and (min-width: 420px) {
   .showOnMobile { display: block; }
   .hideOnMobile { display: none; }
}
@media only screen and (min-width: 1050px) {
   .showOnDesktop { display: block; }
   .hideOnDesktop { display: none; }
}

附上CSS供引用。 CSS 实际上按预期工作。问题如下:

当浏览器收到该特定页面的 URL http://example.org/page.html#manuals 时，我希望文档直接导航到第一个可见 <a>元素。无论如何，我无法建立深层链接来处理第一个可见元素。我读到存在某种限制，但我想知道是否有解决方法，或者我唯一的选择是否是使用 javascript 模拟深层链接(我试图避免)。非常感谢

Answer 1

也许可以更改标记？

<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
  <!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
  <!-- Extra html for Mobile presentations -->
</div>

这样，无论环境如何，哈希的目标 (#manuals) 始终可见。由于重复较少，这也使其更易于维护。