Question

我有一个包含大量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代码.......

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>

没有测试过，但这就是想法。缺点是您必须在代码中将div维持在3位

在var divIds数组中。
在html标签中。
在顶部的链接中。

你可以编写一些javascript来生成所有3个，完全取消它的maitenance部分。

至于在脱机文档中使用jQuery，最好的路径可能是在<script></script>标记内的doc本身中包含jquery.min.js文件的文本。这样你就不必担心路径和什么不是。

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);
    }
}

Answer 3

我在不知道div ids的情况下做了一个不引人注意的例子：

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

它的代码更多但是如果你不想使用js lib，这就是你得到的。 ;）

没有jquery的HTML文档分页

3 个答案: