为什么我的java脚本在jsFiddle中完美运行但在任何浏览器中都不行？

Question

please help me! been stuck for very long. I coded the exact same thing in my html file but it is not working at all.

i inserted the javascript under the HEAD section.

Here is my fiddle

The 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>
     ​

The JavaScript:

$(document).ready(function() {
    $(".test").hover(function() {
    $(".test").not($(this)).css({
        "opacity": 0.1
    });
}, function() {
    $(".test").css({
        "opacity": 1
    });
});
});​

Answer 1

Only three posibilities here

The script should be placed in header section of your web page as it is called onload

Second is the jQuery library version which on jsfiddle its 1.7.2 so either your jQuery version is old or you are not using the library at all

Third is that you must be missing <script></script> tags as jsfiddle don't need it

Answer 2

The most probably cause for the same is that the script needs to be executed after the DOM is ready which is something ensured by jsfiddle.

It would be great if you provide a link to the fiddle.

Answer 3

Sounds like you have not included JQuery in your header. Add the following:

<script src="jquery_js_goes_here"></script>

I'd grab the latest and look at using the available cdn (or google's cdn) Eg

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

Hope that helps.