没有jQuery的HTML文档分页

HTML document pagination without jQuery

本文关键字：文档 分页 HTML jQuery 没有      更新时间：2024-05-24

我有一个很大的页面，里面有很多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代码吗？。

<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个，完全去掉其中的维护部分。

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

你可以这样做（不要根据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);
    }
}

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

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

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

相关文章：