Javascript 为什么只在JSFIDLE上工作？_Javascript_Jquery_Html_Css_Jsfiddle

Javascript 为什么只在JSFIDLE上工作？

javascript jquery html css

Javascript 为什么只在JSFIDLE上工作？,javascript,jquery,html,css,jsfiddle,Javascript,Jquery,Html,Css,Jsfiddle,大家好，我是JSFIDLE的新手。有人在另一篇文章中帮我写了一个代码，并把它给我：我试着让它在我的Chrome中工作，但当我按下按钮时，它就不工作了。。。为什么? 我的代码： <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <style ty

大家好，我是JSFIDLE的新手。有人在另一篇文章中帮我写了一个代码，并把它给我：

我试着让它在我的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>


html，正文{
宽度：100%；
身高：100%；
保证金：0；
文本对齐：居中；
}
h1{
保证金：0；
填充：10px；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：25px；
}
#菜单{
宽度：100%；
身高：20%；
}
#主容器{
宽度：100%；
身高：80%；
溢出：隐藏；
}
#内容容器{
宽度：300%；
身高：100%；
位置：相对位置；
排名：0；
左：0；
字体大小：0px；
过渡：左0.5s；
-o型过渡：左0.5s；
-ms转换：左0.5s；
-moz过渡：左0.5s轻松；
-webkit过渡：左0.5s轻松；
}
#内容容器>div{
宽度：33.33%；
身高：100%；
显示：内联块；
字体大小：15px；
}
#内容1{
背景：红色；
}
#内容2{
背景：橙色；
}
#内容3{
背景：绿色；
}
$（“#右1，#左3”）。在（“单击”，函数（）{
//当按下内容1上的“右”键时，将触发此命令，
//或在内容3上按“左”。在这两种情况下
//我们想展示内容2。
$（“#内容容器”）.css（{左：“-100%”）；
});
$（“#left2”）。在（“单击”，函数（）上）{
//当按下内容2上的“左”键时，将触发此操作。
//我们想展示内容1。
$（“#内容容器”）.css（{左：“0%”）；
});
$（“#right2”）。在（“单击”，函数（）{
//当按下内容2上的“右”键时，将触发此操作。
//我们想展示内容3。
$（“#内容容器”）.css（{左：“-200%”）；
});
这是菜单分区
这是内容1
这是内容2
这是内容3

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

在加载DOM之前，您正在运行一个脚本。在之后运行脚本，或者将其放入

$（document）.ready（）


$（文档）.ready（函数（）{
$（“#右1，#左3”）。在（“单击”，函数（）{
//当按下内容1上的“右”键时，将触发此命令，
//或在内容3上按“左”。在这两种情况下
//我们想展示内容2。
$（“#内容容器”）.css（{左：“-100%”）；
});
$（“#left2”）。在（“单击”，函数（）上）{
//当按下内容2上的“左”键时，将触发此操作。
//我们想展示内容1。
$（“#内容容器”）.css（{左：“0%”）；
});
$（“#right2”）。在（“单击”，函数（）{
//当按下内容2上的“右”键时，将触发此操作。
//我们想展示内容3。
$（“#内容容器”）.css（{左：“-200%”）；
});
});

您正在加载DOM之前运行脚本。在之后运行脚本，或者将其放入

$（document）.ready（）


$（文档）.ready（函数（）{
$（“#右1，#左3”）。在（“单击”，函数（）{
//当按下内容1上的“右”键时，将触发此命令，
//或在内容3上按“左”。在这两种情况下
//我们想展示内容2。
$（“#内容容器”）.css（{左：“-100%”）；
});
$（“#left2”）。在（“单击”，函数（）上）{
//当按下内容2上的“左”键时，将触发此操作。
//我们想展示内容1。
$（“#内容容器”）.css（{左：“0%”）；
});
$（“#right2”）。在（“单击”，函数（）{
//当按下内容2上的“右”键时，将触发此操作。
//我们想展示内容3。
$（“#内容容器”）.css（{左：“-200%”）；
});
});

您的代码需要在一个dom就绪的handler中。您的代码需要在一个dom就绪的handler中。另外，请注意，这正是JSFIDLE本身所做的。OP错过了左边选择的

onLoad

。我看到了，非常感谢大家！现在我明白了超负荷！另一个注意事项——这正是JSFIDLE本身正在做的事情。OP错过了左边选择的

onLoad

。我看到了，非常感谢大家！现在我明白了超负荷！

<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>