代码之家 › 专栏 › 技术社区 › Mohamed Khamis

简洁的innerhtml

xhtml html jquery javascript

Mohamed Khamis · 技术社区 · 14 年前

我正在使用html和js,如果用户单击某个东西,我想显示一段html代码。代码有点大,所以使用 document.getElementById("display").innerHTML = 没有吸引力。我搜索了一下,发现了IFrame,但我想避免滚动条之类的东西,我希望我可以使用一个简单的div,我怎么能这样做?我也在使用jquery,我知道jquery中的hide()函数,但问题是带id显示的div中的内容应该动态更改,所以如果用户单击item1,他应该得到text1,item2应该得到text2,我想为textx指定一个位置

3 回复 | 直到 14 年前

SLaks 14 年前

听起来你在找

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

这将使用 rel= 每个元素的属性 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>

zoldar 14 年前

innerHTML方法可能是性能方面最好的方法。如果不检索其他内容(例如通过AJAX调用),请提前将所有块放在单独的div中,并将它们的“display”css属性设置为“none”。然后,您可以通过附加到某个按钮或链接的事件,将特定div的属性更改触发到“block”。

Allan Nienhuis 14 年前

这可以通过绝对地将几个div放置在彼此之上,然后根据用户输入显示/隐藏适当的div来实现。这样就不需要操纵元素的内容,只需显示/隐藏它们。但诀窍是绝对定位元素。如果你这样做了,你可能想要 最后的 列表中的div将被静态定位(假设它们的大小都相同),以便页面的其余部分适当地围绕这些元素流动。或者,您可以将所有这些元素放在另一个静态定位的div中,该div为绝对定位的元素保留空间。