0 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery-1.9.1.js"></script>
<script>
  $('.targetDiv').hide();
  $('.show').click(function () {
     $('.targetDiv').hide();
     $('#div' + $(this).attr('target')).show();
  });

  $('.hide').click(function () {
     $('#div' + $(this).attr('target')).hide();

  });
</script>
<div class="buttons">
  <a  class="show" target="1">Option 1</a>
  <a  class="show" target="2">Option 2</a>
  <a  class="show" target="3">Option 3</a>
  <a  class="show" target="4">Option 4</a>
  <a  class="hide" target="1">Close 1</a>
  <a  class="hide" target="2">Close 2</a>
  <a  class="hide" target="3">Close 3</a>
  <a  class="hide" target="4">Close 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
</body>
</html>

ここで何が間違っているのかわかりません。Jfiddle では動作しますが、そのまま実行しようとすると正しく動作しません。

  1. HTMLファイルとして保存。
  2. 同じファイルに保存します。
  3. Jquery.com から開発パッケージをダウンロード (名前を付けて保存jquery-1.9.1.js)

情報はリクエストに応じて追加されます。1 つのファイルを HTML として保存し、もう 1 つのファイルを JS として保存してリンクする必要がありますか?

4

3 に答える 3

2

JavaScript はロードされるとすぐに実行されます。この場合、ページの準備が整う前にロードされます。そのため、JavaScript は、ページが読み込まれたときに通知するイベントを提供します。

jQuery は、これを支援する優れた関数を提供します。

$(document).ready(function() {
    // CODE
});

これもよく見られます：

$( function() {
    // CODE
});

これは の省略形です.ready()が、基本的には同じものです。両方とも、DOM がロードされるまで待ってからコードを実行します。コードがjsfiddleで機能する理由は、デフォルトでコードが自動的にラップされるためです（左側のメニューのオプションを見てくださいonLoad。選択されたオプションとして表示されます）。

于 2013-03-12T00:33:33.597 に答える
1

JavaScript コード (jQuery 以外のscriptタグの間のもの) を次のようにラップします。

$(document).ready(function() {
    // your code
});
于 2013-03-12T00:31:25.923 に答える
0

もちろん、jQuery スクリプトでコーディングする場合は、別の jquery スクリプトを作成する必要があります。ダウンロードするのは script jquery api script です

于 2013-03-12T01:46:51.450 に答える