我的Javascript似乎不起作用

时间:2013-09-12 16:27:31

标签: javascript jquery html css

我无法让Javascript正常运行。这三个都在同一个文件夹中。 Chrome也需要一段时间才能打开,但Firefox是即时的。感谢。

我的HTML:

<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <div>Hover Over Me!</div>   
    </body>
</html>

我的CSS:

div {
    height: 100px;
    background-color: #ABCDEF;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 1em;
    text-align: center;
}

我的Javascript:

$(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).fadeTo(1000, 1);
    });
    $('div').mouseleave(function(){
        $(this).fadeTo(1000, .25);
});

1 个答案:

答案 0 :(得分:5)

脚本文件的顺序:由于您的脚本文件使用的是jQuery,因此它应该包含在jQuery库之后。

请查看浏览器控制台,了解调试客户端脚本问题的第一步是否有任何错误

<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div>Hover Over Me!</div>   
    </body>
</html>

此外,您还缺少脚本底部的右括号

$(document).ready(function () {
    $('div').mouseenter(function () {
        $(this).fadeTo(1000, 1);
    });
    $('div').mouseleave(function () {
        $(this).fadeTo(1000, .25);
    });
});

演示:Plunker