JQuery: Как показать конкретный набор DIV при нажатии на определенные элементы

Question

JQuery: Как показать конкретный набор DIV при нажатии на определенные элементы

0

Я хочу сделать что-то похожее на всплывающие окна, но с некоторыми отличиями. Я хочу скрыть элементы, щелкнув мышью, и в то же время я хочу показать другой элемент вместо предыдущего и замаскировать остальную часть страницы, но я хочу, чтобы новый элемент остался на своем месте.

Я не хочу, чтобы он плавал и двигался при прокрутке страницы.

Вот моя попытка: jsfiddle

Он работает только для одного элемента, я хочу применить его к набору элементов. Содержимое каждого "большого окна" отличается для других...

Кстати, скрытие и показ щелкнутого элемента ("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>

user3400679 13 март 2014, в 10:17

Источник

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Anujith · Accepted Answer · 2014-03-13T07-10-00.000Z

Смотрите следующее: 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>'

Благодарю. Это было действительно просто, я был неосторожен! Может быть, это потому, что у меня нет большого опыта работы с jquery. :)