我是 Javascript 新手，我的任务是创建一个图片库页面。由于我公司的技术限制，我只能用 JavaScript 编写（没有 jQuery - 它会导致可访问性问题），并且解决方案必须与 IE8 兼容（我知道！）。我在一个 div 中有一系列带有少量文本的缩略图，我需要单击缩略图以在另一个 div 中显示带有大量文本的较大图像。选择第二个缩略图时，必须替换（Ieclose任何以前的大图像和文本），并显示其自己的大图像和相关文本。
我尝试了一些解决方案，但问题是我可以： - 让图像相互替换，而不是文本（即第一个文本保持显示）？或者， - 显示正确的图像和文本，但它们看起来堆叠而不是相互替换。（这是使用显示/隐藏脚本）。
替换img的脚本很简单，但是我不知道如何适应拿起div而不仅仅是图像：
<script type="text/javascript">
function showLarge(srcLarge)
{
document.getElementById("large").src = srcLarge;
}
</script>
<img src="/path/to/thumb1.jpg" onclick="showLarge('/path/to/large1.jpg')"/>
<img src="/path/to/thumb2.jpg" onclick="showLarge('/path/to/large2.jpg')"/>
<img src="/path/to/thumb3.jpg" onclick="showLarge('/path/to/large3.jpg')"/>
<img id="large" src="/path/to/large1.jpg"/>
显示/隐藏脚本是：
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
...并且我希望在显示 div 并选择第二个缩略图时对其进行调整；然后第二个缩略图替换第一个而不是仅仅出现在下面。
就像我说的，我对此很陌生，我希望这会有所帮助。非常感谢。