我正在使用一些Javascript来显示"照片淡入淡出旋转器" <div>.但是,如果没有启用JS,我会想要显示一个动画gif.我实际上已经使用此代码:
<div id="slideshow" class="show pics float-left">
<img src="images/banner-photos/new-01.png" width="343" height="228" alt="photo" />
<img src="images/banner-photos/new-02.png" width="343" height="228" alt="photo" />
<img src="images/banner-photos/new-03.png" width="343" height="228" alt="photo" />
</div>
<noscript>
<link href="css/hide-slideshow.css" rel="stylesheet" type="text/css" />
<p class="adjust"><img src="images/banner-photos/animation.gif" alt="slideshow" /></p>
</noscript>
Run Code Online (Sandbox Code Playgroud)
外部JS文件在它上面发挥了作用<div>.id ="slideshow"上的类设置尺寸,填充,边距,定位等."hide-slideshow"css文件在#slideshow上执行"display:none",并且围绕动画gif的"adjust"类执行一些操作推动和拉动以获得它需要的位置(如果没有隐藏的话,幻灯片放映的位置).
我在FF3,IE7,IE8,Chrome和Safari(Win)中测试了这个.好消息是它就像一个魅力.坏消息是它没有通过W3C验证器.我得到一个错误,说"文档类型不允许元素"链接"这里".
即使我的方法有效,它是否过于笨拙?有没有更好的方法来展示一个<div>如果启用JS而另一个是不同的,<div>如果它不是,以一种跨浏览器工作并通过验证的方式?
谢谢!