使用JS fallback在单选按钮上显示div

时间:2016-05-29 11:17:50

标签: javascript css3 radio checked fallback

我正在建立一个网站,桌面版本一次显示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;
}

或者你们是否建议我实施完全不同的东西?

提前致谢。

1 个答案:

答案 0 :(得分:0)

来自Modernizr website

  

将Modernizr与JavaScript一起使用

     

Modernizr对象

     

Modernizr会跟踪所有功能检测的结果   通过Modernizr对象。这意味着对于每个测试,a   将添加相应的属性。你只需要测试   代码中的真实性,以确定您想要做什么

if (Modernizr.awesomeNewFeature) {
  showOffAwesomeNewFeature();
} else {
  getTheOldLameExperience();
}

所以你的伪代码非常接近!