如何在我的localhost中使用jsfiddle

时间:2014-07-31 06:44:05

标签: javascript jquery html css

这是jsfiddle http://jsfiddle.net/WHzKp/14/

这是我的html文件:

<!DOCTYPE html>
<html>
<head>
 <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>

    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
    $("#test").click(function () { //on clicking the link above
        $(this).colorbox({iframe:true, width:"100%", height:"100%"});
    });
});
</script>
</head>
<body>
<h3>External Form</h3>
<a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" id="test">Please fill out my form.</a>
</body>
</html>

这里的jsfiddle它可以正常工作我需要的,但在我的localhost运行我的html文件它没有工作,任何人都可以指导我,我的错误是什么?

1 个答案:

答案 0 :(得分:3)

你需要修改你的html以包含jquery,因为它将在客户端浏览器中运行,下面我使用了jquery的cdn路径,它应该在jquery.colorbox.js之前加载

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>

    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
    $("#test").click(function () { //on clicking the link above
        $(this).colorbox({iframe:true, width:"100%", height:"100%"});
    });
});
</script>
</head>
<body>
<h3>External Form</h3>
<a href="https://dev88.wufoo.com/forms/ze7xusq0j2tum9/" id="test">Please fill out my form.</a>
</body>
</html>