2010-11-28 24 views
0

我使用的是html和js,如果用戶點擊某個東西,我想顯示一段html代碼。代碼有點大,所以使用document.getElementById("display").innerHTML =並不吸引人。我搜索了一下,發現了IFrame,但我想避免滾動條和東西,我希望我可以使用一個簡單的div,我該怎麼做?我也使用jquery,我知道關於jquery中的hide()函數,但事實是div中的id與id顯示的內容應該動態地改變,所以如果用戶點擊item1,他應該得到text1,item2應該得到text2 ,我希望有textxinnerhtml以一種整潔的方式

回答

1

這聽起來像你正在尋找類似

$('.ShowLink').click(function() { 
    $('#' + this.rel).toggle(); 
    return false; 
}); 

這將切換與各元件與該rel=屬性指定的ID的元素一個特定的地方ShowLink類。
例如:

<a href="#" rel="Text1" class="ShowLink">Show something</a> 
... 
<div id="Text1"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
1

innerHTML的方法可能是最好的性能代價。如果您未檢索到其他內容(例如通過AJAX調用),請將所有塊預先放入單獨的div中,並將其「display」css屬性設置爲「none」。然後,您可以觸發特定div的屬性更改爲「阻止」,同時附加某個按鈕或鏈接的事件。

0

這可以通過絕對定位幾個div在彼此的頂部,然後根據用戶輸入顯示/隱藏適當的。這樣你就不需要操作元素的內容,只需顯示/隱藏它們。訣竅是絕對定位元素。如果你這樣做,你可能希望列表中的最後的 div靜態定位(假設它們全都是相同的大小),以便頁面的其餘部分適當地圍繞這些元素流動。或者,您可以將所有這些元素放置在另一個靜態定位的div中,以便爲絕對定位的元素保留空間。

相關問題