Warum funktioniert das nur mit JSfiddle? [Duplikat

Question

May 19, 2014, 11:42 AM

Warum funktioniert das nur mit JSfiddle? [Duplikat

Diese Frage hat hier bereits eine Antwort:

JQuery-Skript funktioniert in JSfiddle, aber nicht auf HTML-Seite 6 answers

Hallo allerseits, ich bin neu bei JSfiddle. Und jemand hilft mir mit einem Code in einem anderen Beitrag und gibt mir das zu mir:http: //jsfiddle.net/CN8z6/1

Ich habe versucht, es in meinem Chrome zum Laufen zu bringen, aber beim Drücken der Taste funktioniert es nicht ... Warum?

Mein Code:

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

Hoffentlich kann mir jeder erklären, warum nur JSfiddle funktioniert und was ich tun muss, um es selbst auszuführen.