jQuery在jsFiddle中工作，但不在html中

你好，我觉得自己像一个完全白痴，我相信我只是迟到了...但我无法得到这个工作。在jsFiddle它奇妙的工作，但是当我把它放在我的html文件上它不会。请帮忙！我不知道错误在哪里。先谢谢你！这里是我的html：jQuery在jsFiddle中工作，但不在html中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="test-isla.css" type="text/css" /> 

</head> 

<body> 
<div id="back"> 
<div class="red" id="div1"></div> 
<div class="red1" id="div2"></div> 
<div class="red2" id="div3"></div> 
</div> 
<div id="content"><p>Body Content goes here!!</p></div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     function startfade(){ 
     $("#div3").fadeIn(3000, function(){ 
      $(this).delay(2000).fadeOut(); 
      $("#div2").fadeIn(3000, function(){ 
       $(this).delay(2000).fadeOut(); 
       $("#div1").fadeIn(3000, function(){ 
        $(this).delay(1000).fadeOut(); 
       }); 
     }); 
     }); 

     } 
     setInterval(function() { 
       startfade(); 
     }, 9000); 
     startfade(); 
     }); 
</script> 
</body> 
</html>

这里是我想在jsFiddle上实现的最终结果，它的工作原理！ http://jsfiddle.net/liveandream/TCCn8/46/

预先感谢您！

来源

2012-02-21 lov2code

尝试[运行]在jsFiddle中的小提琴，然后使用代码http://jsfiddle.net/draft/ 这将给你在jsFiddle上使用的确切代码。这一定会奏效。

来源

2012-02-22 00:54:54 zalun

你真棒，我不知道什么可能会导致我的问题，但这工作完美！谢谢！ – lov2code 2012-02-22 03:05:00

如果我将CSS复制并粘贴到HTML中，它对我有用。我想你的网页没有找到CSS。检查FireBug以确认它正在查找您的CSS文件。

奇怪的是，当我从SO复制代码。最后一个startfade();后面出现一个问号，它不是可见的字符。这就是我看到的：

startfade();?

FireBug的Javascript控制台抱怨过它。

来源

2012-02-21 05:00:57

我做了，它找到了正确的..这是如此愚蠢。我不明白为什么它不起作用。 – lov2code 2012-02-21 05:04:05

本着迟到的精神，是不是缓存一个旧版本的CSS - 用Ctrl + F5强制刷新。不知道还有什么可能是错的... – 2012-02-21 05:05:46

更新了我的答案 – 2012-02-21 05:07:47

我不记得脚本标记在被包含在主体中时是否被阻塞。有什么可以阻止你将jQuery引用移动到头部吗？

另外，由于您自己的脚本无论如何都在使用文档就绪功能，因此您可能不会在身体关闭标记之前使用它。由于它在那里，因此您可以省去文档就绪功能，因为在脚本运行时，您所引用的节点已经添加到DOM中。

来源

2012-02-21 05:18:27

尽量安排你的代码1

把这个头标记

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

而且首先尝试将CSS头了。使用

<style></style>

来源

2012-02-21 05:21:15 Bert

把CSS放在同一个文件夹中，并删除questionmark，它会工作！

来源

2012-02-21 05:23:52 elrado

the folowing example work perfectly. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
#content{ 
position: relative; 
z-index: 999;} 
#back{ 
    position: absolute; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    padding:0; 
    margin-top: 0px; 
    z-index: 1; 
} 

.red{ 
background: red; 
    width: 800px; 
    height: 800px; 
    overflow: hidden; 
    display: none; 
    position: absolute; 
    z-index: 1; 
} 
.red1{ 
background: green; 
    width: 800px; 
    height: 800px; 
    display: none; 
    position: absolute; 
    overflow: hidden; 
    z-index: 1; 
} 
.red2{ 
background: blue; 
    width: 800px; 
    overflow: hidden; 
    height: 800px; 
    display: none; 
    position: absolute; 
    z-index: 1; 
} 
</style> 
</head> 
<body> 
<div id="back"> 
<div class="red" id="div1"></div> 
<div class="red1" id="div2"></div> 
<div class="red2" id="div3"></div> 
</div> 
<div id="content"><p>Body Content goes here!!</p></div> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     function startfade(){ 
     $("#div3").fadeIn(3000, function(){ 
      $(this).delay(2000).fadeOut(); 
      $("#div2").fadeIn(3000, function(){ 
       $(this).delay(2000).fadeOut(); 
       $("#div1").fadeIn(3000, function(){ 
        $(this).delay(1000).fadeOut(); 
       }); 
     }); 
     }); 

     } 
     setInterval(function() { 
       startfade(); 
     }, 9000); 
     }); 
</script> 
</body> 
</html>

来源

2013-07-02 04:42:58

jQuery在jsFiddle中工作，但不在html中

回答

相关问题