javascript - 没有jquery的HTML文档分页

Question

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

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

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