Question

假设我在网站上有一些超链接。如果你点击一个链接，就会发生一些事情：

$('a').click(function() {
  $(this).next('div').toggle()
})

在手机上，如果用户禁用了JavaScript，则不会发生任何事情。

这是CSS：

a + div {
  display: none;
}

a:hover + div {
  display: block;
}

但是徘徊不能在移动设备上工作！？

如何让智能手机/平板电脑用户点击禁用JS的链接？

Answer 1

执行此操作的常用方法是通过复选框hack。您可以使用标签+输入类型=“复选框”+ div组合代替a + div组合。使用一些简单的CSS，您可以隐藏实际的复选框，但仍然使用标签来更改隐藏复选框的：checked状态并使用：checked + div规则来显示或隐藏div。

CBroe指出：在这种情况下目标更好，然后是复选框hack。它基本上允许您根据页面当前网址的哈希值更改CSS。

这样的事情应该有效：

<a href="#myContent1">Link text</a>
<div id="myContent1">I only show up if you click the link.</div>

a + div {
  display: none;
}

a + div:target {
  display: block;
}

禁用JavaScript的超链接

1 个答案: