html 锚链接在桌面上工作,但不能移动

oxf4rvwz  于 2022-12-16  发布在  其他
关注(0)|答案(2)|浏览(166)

我有一个响应导航,转换为移动屏幕菜单。它只有锚链接。它在桌面上工作完美,但当菜单更改为移动版本,点击链接不会移动页面到正确的点。
有javascript被用来显示和隐藏菜单,我在chrome的控制台上点击时看不到任何错误。
由于mobile和desktop的不同,我有两个相似的html块,一个类为“desktop”,另一个类为“mobile”,它们根据媒体查询显示/隐藏。它们有相同的id,导航是否总是试图找到“desktop”而不是“mobile”部分?

lsmepo6l

lsmepo6l1#

他们有相同的id的部分,这将是这种情况下,导航总是试图找到“桌面”部分,而不是“移动的”部分?
是的。ID attribute values must be unique,即使其中任何一个是隐藏的。在您的移动的浏览器上,单击链接将其发送到它可以找到的第一个ID匹配,即您的“桌面”部分。
如果其他用途需要,你仍然可以为桌面和移动的使用不同的代码块,但是你必须为每个元素使用不同的ID。

<div id="element-A-desktop">This shows on desktop.</div>
<div id="element-A-mobile">This shows on mobile.</div>
iovurdzv

iovurdzv2#

我的想法是正确的。虽然“桌面”代码是隐藏的,但导航仍然指向它在移动,因此似乎页面不滚动。

相关问题