我有一个包含很多 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
var divIds数组中。您可以编写一些 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);
}
}