在页面(散列)链接中，获取第一个可见元素

Question

我有一个部分视图(工具栏、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实际上正在按预期工作。问题如下：

当浏览器收到该特定页面http://example.org/page.html#manuals的url时，我希望文档直接导航到首次可见的 <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>

这样，不管环境如何，散列的目标(#手册)总是可见的。这也使它更易于维护，因为您的复制较少。