Question

大家好，我是JSfiddle的新人。而somone帮助我在另一篇文章中提供了一些代码并将其交给我：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上运行，以及我自己运行它需要做些什么。

Answer 1

您在加载DOM之前运行脚本。之后运行脚本，或将其放入$(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？

1 个答案: