动态页面使用的div和JavaScript
问题描述:
我有一个记录循环,创建一个表,每9项它包装他们周围一个div所以基本上是这样的:动态页面使用的div和JavaScript
<div>
<table>rs1, rs2 ----> rs9</table>
</div>
<div>
<table>rs10, rs11 ----> rs18</table>
</div>
etc...
现在,我想它,首先在仅第一个div显示,其他人隐藏,但我有ASP循环,为各种div(页面)生成可点击的链接,点击任何给定的链接将显示该div并隐藏所有其他链接。
这里是ASP代码,我到目前为止有:
Dim i
If totalPages > 1 Then
Response.Write("<div id='navigation'>")
For i=1 to totalPages
Response.Write ("<a href='' onlick=''>"& i &"</a> | ")
Next
Response.Write("</div>")
End If
现在我只需要弄清楚的JavaScript ...
答
为了使这个简单,你应该确定你的表不知何故。给他们识别特定结果集和identiefies所有结果集类名的ID:
<table id="resultset-1" class="resultset"> ...
然后你就可以在你的导航元素将事件链接绑定:
window.onload = function() {
document
.getElementById('navigation')
.getElementByTagName('a')
.onclick = function() {
var id = parseInt(this.innerHTML, 10);
document.getElementsByClassName('resultset').style.display = 'none';
document.getElementById('resultset-'+id).style.display = 'block';
return false;
}
}
我没有测试过这和我的香草JS的技能有点生疏,但应该工作到我的理解。只是为了踢,这是一个使用jQuery的一个版本,我可以保证工作:
$(function() {
$('#navigation a').click(function() {
var id = parseInt($(this).html(), 10);
$('.resultset').hide();
$('#resultset-'+id).show();
return false;
});
});
记得最初隐藏,而是所有的第一个div莫名其妙–你不需要使用JS,你可以使用ASP例如,将style="display: none;"
打印到要隐藏的所有表格。
按照逐步增强的原则,使用javascrpt来隐藏它们会更好。这样,禁用javascrpt的用户可以访问所有内容。 – steveax 2011-12-01 04:58:02