-2

このコードは、jsfiddle で必要なことを行うのに完全に機能しますが、ローカル ファイル (index.html、index.css、index.js) で実行するときに複製できません。jsfiddleだけでなく、ローカルで動作させる方法を概説してくれる人は親切でしょうか? これは jsfiddle です: http://jsfiddle.net/Naush/Cr7GK/

これは私がそれがどのように見えるべきだと思うかです:

HTML:

<html>

<head>

    <link type="text/css" rel="stylesheet" href="css/index.css"/>

    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>

<div class="black"></div>
<div class="orange"></div>

</body>
</html>

CSS:

.black {
    position:absolute;
    height:100px;
    width:200px;
    background-color:gray;
}
.orange {
    display:none;
    position:absolute;
    height:100px;
    width:100px;
    background-color:orange;
    left:200px;
}

JavaScript:

$(document).ready(function () {
    $(".black").hover(function () {
        $(".orange").toggle();
    })
})

HTML の head タグに何かを適切に含めていないという強い思いがあります。ファイルパスは正しいです。再確認しました。どんな助けでも大歓迎です！

4

7 に答える 7

2

Jquery ライブラリ src を含める必要がありますね。

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

于 2013-05-25T07:13:50.877 に答える
2

jQuery にリンクしていないようです<head>- JSfiddle は自動的にリンクしますが、通常は自分でリンクする必要があります。

これをあなたに含めるだけです<head>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

ここに作業バージョンがありますhttp://fotest.co.nf/

于 2013-05-25T07:13:53.337 に答える
2

あなたはjquery libをインポートしていません

于 2013-05-25T07:14:28.080 に答える
1

次のような構文エラーを削除することをお勧めします

$(document).ready(function () {
    $(".black").hover(function () {
        $(".orange").toggle();
    });
});

jsファイルを追加したかどうか、ロードされているかどうかを確認します。追加されていない場合は、ヘッダーにこれを追加してみてください

<link type='text/javascript' href='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' />
于 2013-05-25T07:12:11.537 に答える
1

jquery 1.9.1.js を追加しましたか?

いいえの場合は、追加してください。

http://code.jquery.com/jquery-1.9.1.js

于 2013-05-25T07:13:21.890 に答える
1

jqueryスクリプトを含めて表示されません

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
于 2013-05-25T07:14:50.823 に答える