Question

这是我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Divs</title>
        <script type="text/javascript" src="script.js"></script>
   <link href="stylesheet.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div>word</div>
        <div>word</div>
        <div>word</div>
        <div>word</div>
    </body>
</html>

这是我的css代码：

div {
    height:50px;
    width:100px;
    display: inline-block;
    background-color:black;
    color:white;
    text-align:center;
    line-height:50px;
}

这是我的javascript代码：

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }); 
   });
   $('div').click(function() {
       $(this).fadeOut(1000);
   }); 
});

当我在Dreamweaver中进行浏览器预览或实时代码时，单击处理程序或动画未触发，我的代码错误，或者程序设置错误，我丢失了（我已经在chrome上试过了，firefox和野生动物园。）

Answer 1

我不知道Dreamweaver如何管理它的环境，但是你的脚本看起来像是在使用jQuery，但你的html没有加载那个库。

尝试在您的某个浏览器中打开开发者控制台并查找JavaScript错误，您可能会看到类似Uncaught ReferenceError: $ is not defined

的内容

从jQuery download page复制脚本代码。应该在脚本执行之前加载jQuery，因此您的文档<head>将如下所示：

<head>
    <title>Divs</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

这是一个显示代码工作的JSFiddle：http://jsfiddle.net/qD35V/您可以使用侧栏上的Frameworks菜单打开和关闭jQuery。

Answer 2

将此链接放在script.js

之前

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">     </script>

这是jquery链接没有这个你的jquery脚本无法运行。总是当你使用jquery时，你必须放jquery.js，你可以在

上了解更多

http://jquery.com/

当我从Dreamweaver进行浏览器预览时，javascript行为无法正常运行，

2 个答案: