Html 单击鼠标打开和关闭以更改页面的一部分

我正在用Dreamweaver CS4中的HTML和CSS构建一个带有公文包的页面。页面将有一个“框”，其中包含代表不同作品的小图像。当点击其中一个小图像时，我想在旧框的顶部加载一个新的“框”，其中包含关于该作品的信息。新框应完全覆盖旧框，新框需要具有“关闭”功能，然后将其移除并再次显示原始页面。当框更改时，我希望页面的其余部分保持原样。我希望每个小图像都有这个功能

我是一个知识有限的初学者，所以我正在寻找最简单的方法来做到这一点，并将非常感谢任何建议

提前谢谢

创建一个容器（像div）并让它有两个子容器，一个是包含缩略图的“旧框”，一个是包含信息的“新框”。让这两个孩子完全占据他们的父母

现在只需在“新建框”上将

显示设置为
none
，并使用javascript切换显示哪一个。我建议您为此研究jQuery

所以你会有这样的想法：

<div class="container">
  <div class="thumbnail">
    <a href="#" class="toggleLink">
      ...
    </a>
  </div>
  <div class="info">
    <a href="#" class="toggleLink">
      ...
    </a>
  </div>
</div>
<script type="text/javascript">
  $(function(){
    $('a.toggleLink').click(function(){
      var container = $(this).closest('div.container');
      $(container).find('div.thumbnail').toggle();
      $(container).find('div.info').toggle();
    });
  });
</script>


$（函数（）{
$（'a.toggleLink'）。单击（函数（）{
var container=$（this.closest（'div.container'）；
$（container.find（'div.缩略图'）.toggle（）；
$（container.find（'div.info'）.toggle（）；
});
});

免责声明：我并没有实际测试这段代码，但它应该是正确的。将其作为一个概念使用，不要只是复制粘贴它。

有很多方法可以做到这一点，所有这些方法都涉及javascript。示例HTML：

<div class="smallimage">
    <img src="...." />
    <div class="explanation">Lorem ipsum blah</div> 
</div>

使用javascript设置div hidden或visibleHi@Joeri Hendrickx，非常感谢您的回答。不幸的是，我是一个新手&不明白2做什么。我按照你的建议做了，创建了一个div，里面有两个div（大小相同），隐藏了'info'div，我还把脚本放在了头上。但当我点击时，什么也没发生。我是不是应该放点东西来代替#？我想要的是在同一页上有许多小图片，每个图片都在上面加载一个新屏幕，覆盖所有图片，然后从内部关闭。这是否可能使用你建议的方法，或者只对覆盖父元素的相同大小的1个元素有效？抱歉-我不明白。@noobug：此解决方案仅用于在一个缩略图的显示/信息之间切换；但是你可以对整个事情使用或多或少相同的方法。这段代码只有在包含jQuery的情况下才有效，所以谷歌可以从那里开始。试着理解它是如何工作的，不要盲目地复制粘贴它。另外，为了打开你的形象，我建议你看看lightbox或它的竞争对手。谢谢你。这并不是我想要做的，但很有帮助：想象一下，如果在这个页面上，你可以点击四幅图像中的一幅，打开一个新的屏幕（包含文本和图像的页面），它将加载到顶部，以完全覆盖所有四幅图像。这将有一个关闭按钮将其删除，并再次显示四个图像。每个图像都可以点击，每个新屏幕都有不同的内容，但在一个大小和位置完全相同的框中，完全覆盖了四个图像。有什么办法可以做到吗？非常感谢。它涵盖了四幅图像，但不是全屏，对吗？这里有一个例子：，如果您对它的工作原理有任何疑问，请告诉我。另外，我只在ChromeMany中测试过它，非常感谢@waitinformatrain-这正是我所寻找的效果。除了在这个JSFIDLE中，我无法让它工作，我想知道我是否做了一些非常基本的错误-我能用javascript检查一下吗，我能把这个$（'.image'）放进去吗。单击（function（）{id=$（this.attr（'id'）；$（“#“+id+”）.show（））$（'.close'）。单击（函数（）{$（“.imagebox”）.hide（）；}）；在文件的开头部分？这是对的还是我把标签弄错了？再次感谢！！是的，但是使用javascript，html元素在页面加载完成之前不存在，因此javascript无法正常工作。如果没有jQuery，您将使用onLoad属性。使用jQuery，您只需像这样包装所有javascript代码：$（function（）{//javascript code HERE}）。这是jQuery的说法“请在页面加载完毕后执行此操作。）再次感谢，@waitinformatrain，但很抱歉，我仍然无法使其正常工作。我在HTML中包含了jQuery的链接，或者我是这么想的，我甚至不确定我是否做对了。这是我的HTML代码——您能告诉我调用jQuery/java脚本的部分是否位于正确的位置/编写是否正确吗？我试图按照本教程中的说明进行操作，但我认为我没有正确地包含它。再次感谢。
$('.smallimage').click(function(){
    $('.explanation', this).toggle();
});