为什么只工作在JSfiddle？ [英] Why only works on JSfiddle?
本文介绍了为什么只工作在JSfiddle？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好大家在JSfiddle新的。和somone帮助我在另一个职位的代码，并给我这个给我： http://jsfiddle.net/CN8z6 / 1 /
Hello everyone im new on JSfiddle. And somone help me with a code in another post and give me that to me: http://jsfiddle.net/CN8z6/1/
我试图使其在我的Chrome中工作，但我按下按钮...为什么？
I tried to make it work in my Chrome but i dosen't work when i press the button... Why?
我的代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
$("#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%"});
});
</script>
</head>
<body>
<div id="menu">
<h1>This is the menu div</h1>
</div>
<div id="main-container">
<div id="content-container">
<div id="content1">
<h1>This is content 1</h1>
<a href="#" id="right1">Right</a>
</div>
<div id="content2">
<h1>This is content 2</h1>
<a href="#" id="left2">Left</a>
<a href="#" id="right2">Right</a>
</div>
<div id="content3">
<h1>This is content 3</h1>
<a href="#" id="left3">Left</a>
</div>
</div>
</div>
</body>
</html>
希望任何人都能解释为什么只能在JSfiddle上工作，我需要做什么来自己运行
Hope anyone can explain me why only works on JSfiddle, and what i need to do to run it myself.
推荐答案
在DOM加载之前，您正在运行脚本。或者在 $（document）.ready（）。
You're running a script before the DOM is loaded. Either run the script after, or put it in $(document).ready().
<script type="text/javascript">
$(document).ready(function() {
$("#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%"});
});
});
</script>
这篇关于为什么只工作在JSfiddle？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
