0

私のサイトはjQuery Uiで非常にうまく機能していましたが、突然色を変えて停止しました! なぜこれが起こったのか、何かヒントはありますか？JavaScript を HTML ファイル自体に記述し、別の .js ファイルとしてリンクしてみました。どちらも機能していないようでした。

私の HTML : 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Spree 2014 | BITS - Pilani, K. K. Birla Goa Campus Sports Festival</title>

    <link rel="stylesheet" type="text/css" href="teaser.css" />
    <LINK REL="SHORTCUT ICON" HREF="http://s9.postimg.org/jtx29pdbf/bits.png" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript" src="teaser.js"></script>

</head>

<body>
    <div id="sidebar">
        <img src = "images/arrow.png" alt = "Click to open" id = "arrow">
    </div>

        <div id ="gallery" class = "hidden"><div class="text">Gallery</div></div>
        <div id = "lookback" class = "hidden"><div class="text">Lookback</div></div>
        <div id = "timer" class = "hidden"><div class="text">Timer</div></div>

    <div id="social">
        <a href="https://www.facebook.com/bitsspree?fref=ts"><img src="images/fb.png" alt = "Contact us on Facebook" id = "fb"></a>
        <a href="https://twitter.com/bitsspree"><img src="images/twitter.png" alt = "Stay tuned on twitter" id = "twitter"></a>
    </div>

    <div id="tabs">
            <ul>
                <li><a href="">About</a></li>
                <li><a href="">Sponsors</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Subscribe</a></li>
            </ul>
    </div>
    <div>

    <div id="logo">
        <img src="images/spreelogo.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
    </div>

    <div id="bits">
        <img src="images/bits.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
    </div>

    <div id="man">
        <img src="images/runningman.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
    </div>
</body>

私のJSファイル：

$(document).ready(function(){
    $("#bits").hide();
    $("#lookback").hide();
    $("#timer").hide();
    $("#arrow").click(function(){
        $("#sidebar").hide();
        $("#gallery").show( "fold", 2000 );
        $("#lookback").show( "fold", 2000 );
        $("#timer").show( "fold", 2000 );
    });
});
4

3 に答える 3

4

このような問題は、通常、ブラウザーの開発者ツールを使用して簡単に解決できます。私のお気に入りは Firefox の Firebug ですが、最近の各ブラウザーには必要な機能があります。

これは、ファイルが見つからないか、JavaScript エラーが原因である可能性があります。デバッグを有効にしてページを読み込みます。ネットワーク レコードで 404 を確認し、コンソールで JS エラーを確認します。HTML を調べて、DOM モデルが期待どおりかどうかを確認することもできます。スクリプトにブレーク ポイントを設定して、コードに到達しているかどうかを確認できます。到達していない場合は、コール スタックをさかのぼってロジックのどこが間違っているかを確認し、コードをステップ実行します。

これらのスキルを練習できれば、他の人の助けを必要とせずにバグの大部分を解決できます。

于 2013-07-18T12:11:44.890 に答える