Question

我是html的新手，刚开始在学校做这件事，我试图让这个网站只是为了测试一些东西。出于某种原因，它仅适用于JSFiddle。我只是想点击按钮发光。这是代码：

<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
    img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    div#info_box {
        height: 221px;
        width: 221px;
    }
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
    <img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
     <img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
     <span class="custom info">
</span>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('div#trigger').click(function() {
            //Get info_box
            var info = $('div#info_box');
            //Fade the box in during 1 sec, show it for 5, and let it fade out again
            info.fadeIn(1000).delay(10).fadeOut(1000);
        });
    });
</script>

我尝试使用谷歌浏览器，网络浏览器，查看其他答案，但我仍然不确定如何让它工作。

Google Chrome说Uncaught Reference Error: $ is not defined 但我不知道该怎么做。

如果有更多信息可以提供帮助，请询问哪些信息，我会将其提出来。

Answer 1

将此链接添加到<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

使用jquery

时需要$参考

Answer 2

请将Jquery包含在脚本的顶部，因为许多插件都会使用它。

http://jquery.com/download/

脚本不起作用

2 个答案: