[英]Why does my java script work perfectly in jsFiddle but not in any browser?
请帮我! 被困了很久。 我在我的html文件中编码完全相同的东西,但它根本不起作用。
我在HEAD部分下插入了javascript。
HTML:
<div id="content">
<div id="colone">
<div id="introbox" class="test">
</div>
<div id="infobox" class="test">
<div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
INFO
</div>
</div>
</div>
<div id="coltwo">
<div id="aboutbox" class="test">
<div style="border-bottom:1px solid #666;width:250px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
ABOUT
</div>
</div>
<div id="gallerybox" class="test">
<div style="border-bottom:1px solid #666;width:260px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
GALLERY
</div>
</div>
</div>
<div id="colthree">
<div id="contactbox" class="test">
<div style="border-bottom:1px solid #666;width:180px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
CONTACT US
</div>
</div>
<div id="extrabox" class="test">
<div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
EXTRAS
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(".test").hover(function() {
$(".test").not($(this)).css({
"opacity": 0.1
});
}, function() {
$(".test").css({
"opacity": 1
});
});
});
这里只有三个可能性
该脚本应放在网页的标题部分,因为它被称为onload
第二个是jQuery库版本,在jsfiddle上它的1.7.2,所以要么你的jQuery版本旧了,要么你根本就没有使用这个库
第三,你必须缺少<script></script>
标签,因为jsfiddle不需要它
最可能的原因是,在DOM准备好之后需要执行脚本,这是jsfiddle确保的。
如果你提供一个小提琴的链接会很棒。
听起来你没有在标题中包含JQuery。 添加以下内容:
<script src="jquery_js_goes_here"></script>
我会抓住最新的并看看使用可用的cdn(或google的cdn)例如
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.