jquery:如何在单击特定元素时显示特定的 DIV 集

Question

我想做一些看起来有点像弹出框的东西，但有一些不同。我想隐藏点击的元素，同时我想在前一个元素的位置显示另一个元素并掩盖页面的其余部分，但我希望新元素留在原处。

我不希望它在滚动页面时 float 和移动。

这是我的尝试:jsfiddle

它只适用于一个元素，我想将它应用于一组元素。每个'largebox'的内容对于其他人来说是不同的......

顺便说一下，隐藏和显示点击的元素('smallbox')没有有趣的效果，我能做些什么呢？

HTML:

<a href="#show" class="showlargebox" >
<div class="smallbox">
<p>title1</p>
</div>
</a>
<div id="show" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>Content1</p>
</div>
<p></p>

<a href="#show" class="showlargebox" >
    <div class="smallbox">
    <p>title2</p>
    </div>
</a>
<div id="show" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>content2</p>
</div>

Answer 1

看到这个: DEMO

您有多个具有相同 id 的无效元素..

<a href="#show1" class="showlargebox" >
<div class="smallbox">
<p>title1</p>
</div>
</a>
<div id="show1" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>Content1</p>
</div>
<p></p>

<a href="#show2" class="showlargebox" >
<div class="smallbox">
<p>title2</p>
</div>
</a>
<div id="show2" class="largebox">
    <a href="#" class="close"><img src="resources/image/close.png" title="Close Window" alt="Close" /></a>
    <p>content2</p>
</div>`