Question

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

我是一名知识有限的初学者，所以我正在寻找最简单的方法，并且非常感谢任何建议。

提前致谢！

Answer 1

jQuery Captify Plugin

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

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

将.explanation设置为display：none后，您可以使用这样的一些jquery代码在单击图像时将其显示/隐藏（将其放入document.ready函数中）

$('.smallimage').click(function(){
    $('.explanation', this).toggle();
});

Answer 2

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

现在只需在{新框'上将display设置为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>

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

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

2 个答案: