没有jQuery的HTML文档分页

Question

我有一个很大的页面，有许多div，这些div都包含在一个单独的div中。页面顶部有一些数字链接，数量等于我所拥有的所有被包含的div。现在我想做的是，当点击一个数字时，我只想显示与该数字相对应的div并隐藏所有其他div。

links--> 1 2 3 4 5 6 7 .....
<div id="all">
  <div id="mail1">..........</div>
  <div id="mail2">..........</div>
  <div id="mail3">..........</div>
  <div id="mail4">..........</div>
  <div id="mail5">..........</div>
  <div id="mail6">..........</div>
  .....and so on
</div>

我必须在HTML内完成此操作，而该HTML将被存储并且也可以离线查看，因此不能在此处使用jQuery。 必须使用JavaScript本身来完成它。

有人可以帮我编写JavaScript代码吗？

- Gaurav Sachdeva

---

为什么离线查看会禁用jQuery？只要您不托管它，就可以使用。 - mplungjan

你似乎已经说明了你要做什么；你希望我们帮助你什么？你遇到了哪些困难；你对我们有什么问题？ - David Thomas

@mplungjan 看来要使用jQuery，我必须在某个地方托管jquery.js文件，对吧......我想要的是一个单独的HTML文档，其中包含所有的JavaScript代码。所以我猜jQuery不能被使用......我说得对吗？ - Gaurav Sachdeva

不。您也可以在页面中包含jQuery。JQuery只是JavaScript。 - mplungjan

@david...我需要帮忙写JavaScript代码... - Gaurav Sachdeva

Answer 1

<script type="text/javascript">
    var divIds = ["mail1", "mail2", ..., "mailn"];
    function showDiv(showId) {
         for(var i = divIds.length; i--; ) {
              if(divIds[i] === showId)
                  document.getElementById(showId).style.display = "block";
              else
                  document.getElementById(divIds[i]).style.display = "none";
         }
    }
</script>

然后你顶部的链接将会是这样：

<a href="#" title="Show Mail 1" onclick="showId('mail1');">1</a>

我还没有测试过，但这是个好主意。缺点是你需要在代码中维护3个div。

1. 在var divIds数组中。
2. 在html标签本身中。
3. 在顶部的链接中。

你可以编写一些JavaScript来生成所有3个div，完全消除维护部分。

至于在离线文档中使用jQuery，最好的方法可能是在<script></script>标签内部包含jquery.min.js文件的文本。这样，您就不必担心路径等问题。

- Patrick M

---

不客气！包含jQuery脚本文件或仅合并novus的代码都有一些重大改进，所以还不要排除这个选项 :-) - Patrick M

Answer 2

您可以像这样做（不要以js编码风格来评判我，我不是js高手）：

window.onload = function() {
    var outer = document.getElementById("all");

    for (var i=0; i < outer.childNodes.length; i++) {
        outer.childNodes[i].addEventListener("click", doSomething);
    }

    function doSomething() {
        // here you can run loop for changing display style for you divs
        console.log(this.id);
    }
}

- novus42

---

忘了明确地迭代子节点。这正是我使用jQuery的方式，只是忘记了如何高效地编程而已，嘿。 - Patrick M

实际上，我稍微错过了这个问题。 - novus42

你可以把它整理好。只需根据它们的编号为链接添加id，并通过 document.getElementById('mail' + i); 在同一循环内为链接添加事件监听器。 - Patrick M

Answer 3

我制作了一个不依赖于div id的示例：

http://jsfiddle.net/8pQzx/2/

虽然代码量更多，但如果您不想使用JavaScript库，这就是您可以得到的结果。 ;)

- Sebastian Stiehl