为什么只适用于JSfiddle？

大家好，我是JSfiddle的新人。 并且somone帮助我在另一篇文章中提供代码并将其交给我： http ： //jsfiddle.net/CN8z6/1/

我试图让它在我的Chrome中运行，但当我按下按钮时我不会工作……为什么？

我的代码：

     html, body { width: 100%; height: 100%; margin: 0; text-align: center; } h1 { margin: 0; padding: 10px; font-family: Helvetica, Arial, sans-serif; font-size: 25px; } #menu { width: 100%; height: 20%; } #main-container { width: 100%; height: 80%; overflow: hidden; } #content-container { width: 300%; height: 100%; position: relative; top: 0; left: 0; font-size: 0px; transition: left 0.5s ease; -o-transition: left 0.5s ease; -ms-transition: left 0.5s ease; -moz-transition: left 0.5s ease; -webkit-transition: left 0.5s ease; } #content-container > div { width: 33.33%; height: 100%; display: inline-block; font-size: 15px; } #content1 { background: red; } #content2 { background: orange; } #content3 { background: green; }   $("#right1, #left3").on("click", function() { // This fires when 'right' is pressed on content 1, // or 'left' is pressed on content 3. In both cases // we want to move to show content 2. $("#content-container").css({left: "-100%"}); }); $("#left2").on("click", function() { // This fires when 'left' is pressed on content 2. // We want to move to show content 1. $("#content-container").css({left: "0%"}); }); $("#right2").on("click", function() { // This fires when 'right' is pressed on content 2. // We want to move to show content 3. $("#content-container").css({left: "-200%"}); });    
 
This is the menu div
 
 
 
 
 
This is content 1
 Right 
 
 
This is content 2
 Left Right 
 
 
This is content 3
 Left 
 
 
   

希望任何人都能解释我为什么只能在JSfiddle上工作，以及我需要做些什么来自己运行它。

Answer 1

您在加载DOM之前运行脚本。 之后运行脚本，或者将其放在$(document).ready() 。