我有一个很大的页面,里面有很多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
- 在
var divIds
阵列中 - 在html标记本身中
- 在顶部的链接中
您可以编写一些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,这就是你得到的。)