innerhtml以一种整洁的方式

Question

我正在使用html和js，如果用户点击某些内容，我想显示一大块html代码。代码有点大，因此使用document.getElementById("display").innerHTML =并不具吸引力。我用Google搜索并发现了IFrame，但我想避免滚动条和东西，我希望我可以使用一个简单的div，我该怎么做？我也在使用jquery，我知道jquery中的hide（）函数，但问题是div中带有id显示的东西应该动态改变，所以如果用户点击item1他应该得到text1，item2应该得到text2 ，我想拥有textx的特定位置

Answer 1

听起来你正在寻找像

这样的东西

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

这将使用rel=类的每个元素的ShowLink属性指定的ID切换元素。
例如：

<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>

Answer 2

innerHTML方法可能是性能最佳的。如果您没有检索其他内容（例如通过AJAX调用），请事先将所有块放在单独的div中，并将其“display”css属性设置为“none”。然后，您可以通过附加到某个按钮或链接的事件触发特定div的属性更改为“阻止”。

Answer 3

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