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）

任何信息都将根据要求添加。我应该将一个文件保存为 HTML，另一个文件保存为 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 代码（非 jQueryscript标签之间的东西）：

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

当然，如果你想在 jQuery 脚本上编写代码，你必须制作另一个 jquery scipt。您下载的是脚本 jquery api 脚本

于 2013-03-12T01:46:51.450 回答