Почему работает только на JSfiddle? [Дубликат]
На этот вопрос уже есть ответ:
Jquery скрипт работает в JSfiddle, но не на html-странице 6 ответовПривет всем, я новичок в JSfiddle. И кто-то, помогите мне с кодом в другом посте и дайте мне это:http: //jsfiddle.net/CN8z6/1
Я пытался заставить его работать в моем Chrome, но у меня не работает, когда я нажимаю кнопку ... Почему?
Мой код:
<!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, и что мне нужно сделать, чтобы запустить его самостоятельно.