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的网址时，我希望该文档直接导航到第一个可见的 <a>元素。无论如何，我都无法使用第一个可见元素进行深层链接。我已经知道存在某些限制，但我想知道是否有解决方法，或者我唯一的选择是使用javascript模拟深层链接（我和＃ 39;我试图避免）。非常感谢

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

在页面（哈希）链接中，转到第一个可见元素

1 个答案: