動態頁面使用的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

回答

相關問題