动态页面使用的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 ...

来源

2010-04-04 jethomas

为了使这个简单，你应该确定你的表不知何故。给他们识别特定结果集和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;"打印到要隐藏的所有表格。

来源

2010-04-04 22:13:59

按照逐步增强的原则，使用javascrpt来隐藏它们会更好。这样，禁用javascrpt的用户可以访问所有内容。 – steveax 2011-12-01 04:58:02

动态页面使用的div和JavaScript

回答

相关问题