繁体   English   中英

脚本不起作用

[英]Script isn't working

我是html的新手,刚刚在学校开始使用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>

我尝试使用谷歌浏览器,互联网浏览器,浏览其他答案,但是我仍然不确定如何使它正常工作。

谷歌浏览器显示Uncaught Reference Error: $ is not defined但我不确定该怎么做。

如果更多信息可以帮助您,请问哪个,我会提出。

将此链接添加到<head>

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

使用$时需要jquery引用

由于许多插件都在使用Jquery,因此请将Jquery包含在脚本的顶部。

http://jquery.com/download/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM