我正在建立一个网站,桌面版本一次显示10张图像(5x2),这在小型智能手机显示屏上看起来并不太好。为了克服这个问题,我制作了10个单选按钮(仅显示在网站的移动版本上),并且只显示选中的单选按钮附带的图像。这很容易用HTML和CSS3实现,如下所示:
HTML:
<input type="radio" name='pdr' id="pdr1"><label for="pdr1"> Click here</label>
<div class="populardevice" id="populardevice1">stuff in this div</div>
CSS:
.populardevice {
display: none;
}
input#pdr1:checked ~ #populardevice1 {
display: inline;
}
问题是旧浏览器不支持:checked选择器。我的想法是使用CSS3方式显示div,如果它支持,并使用JavaScript作为后备,如果没有。我已经找到了this,这基本上就是我想要的。唯一的问题是如何检测是否存在对:checked选择器的支持?我正在考虑使用Modernizr,但似乎所有要做的就是在我的CSS中创建一个额外的类,说没有检查(对吧?),这对我来说没用,因为我想在那里运行一个JS的片段案件。或者Modernizr是否适合这种情况,利用它这样的东西(伪代码 - 我不知道如何写这个但是如果它是解决方案,我会发现如何):
if (Modernizr.:checked supported) {
use that and terminate this function;
} else {
Execute the JavaScript function from the link above;
}
或者你们是否建议我实施完全不同的东西?
提前致谢。
答案 0 :(得分:0)
将Modernizr与JavaScript一起使用
Modernizr对象
Modernizr会跟踪所有功能检测的结果 通过Modernizr对象。这意味着对于每个测试,a 将添加相应的属性。你只需要测试 代码中的真实性,以确定您想要做什么
if (Modernizr.awesomeNewFeature) { showOffAwesomeNewFeature(); } else { getTheOldLameExperience(); }
所以你的伪代码非常接近!