Javascript 在页面（散列）链接中，找到第一个可见元素

我有一个局部视图（Handlebar 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以供参考。css实际上正在按预期工作。问题如下：

---

当浏览器收到该特定页面的url时

http://example.org/page.html#manuals

，我希望文档直接导航到第一个可见的元素。不管怎样，我无法使用第一个可见元素进行深层链接。我已经读到有一些限制，但我想知道是否有解决办法，或者我唯一的选择是使用

javascript

（我试图避免）模拟深度链接。非常感谢

也许标记可以更改

<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）的目标始终可见。这也使得它更易于维护，因为重复更少。

也许可以修改标记

<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）的目标始终可见。这也使得它更易于维护，因为重复更少。

最好只设置一个类。类似class=“extradiv”并在css中设置display:block。然后在javascript中设置add和remove类。很抱歉，我没有收到这样的评论，但我的媒体查询的目的不是要编写jquery来显示和隐藏移动设备上的元素，也不需要在每个页面上实现

调整大小

。。。媒体查询可以自己完成……最好只设置一个类。类似class=“extradiv”并在css中设置display:block。然后在javascript中设置add和remove类。很抱歉，我没有收到这样的评论，但我的媒体查询的目的不是要编写jquery来显示和隐藏移动设备上的元素，也不需要在每个页面上实现

调整大小

。。。媒体查询可以自己完成…非常感谢您的回答。。。我已经考虑过html的重新设计，但结构并不像示例中的层次结构那么简单。。。因此，我想知道是否有一种本地方式可以让#链接导航到第一个可见元素。。。在采取任何激烈的措施之前，我一直在寻找答案。。。我已经考虑过html的重新设计，但结构并不像示例中的层次结构那么简单。。。因此，我想知道是否有一种本地方式可以让#链接导航到第一个可见元素。。。在采取任何严厉措施之前