Я использую модальный с вкладками с открытым исходным кодом от https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_tab.
Я хотел бы иметь количество изображений, а затем при нажатии на эти изображения вместо этого запускается модальная вкладка, соответствующая соответствующей вкладке.просто перейти на первую вкладку модальной каждый раз.(То есть, если вы выберете изображение 3, появится модальная вкладка 3). Ниже мой код, как бы я это сделал?
SKIP ---- Он хочет, чтобы я добавил больше текста, но я думаю, что я довольно хорошо объяснил, что я ищу.Я ценю, что веб-сайт нуждается в деталях, но если нет необходимости в деталях и большом количестве кода, который приводит к проблеме, зачем ему больше текста без причины ---- SKIP
Код изображения:
<div class="container">
<div class="col-sm-12">
<div class="col-sm-12 available-scene-wrapper available-scene">
<div class="col-sm-2 available-scene-divider available-scene">
<div class="wow fadeInUp" data-wow-delay="0.1s">
<div class="about-col">
<span onclick="document.getElementById('id01').style.display='block'" class="w3-black">
<div class="img">
<div class="set-rental-home-headline"><h2>Kitchen<br> </h2></div>
<img src="img/home-set-2.jpg" alt="Mary Poppins kitchen scene includes magic tables, pots and pans and more from Front Row Theatrical Rental picture" class="img-fluid">
</div>
<h3> The Kitchen with magic props.</h3></span>
</div>
</div>
</div>
<div class="col-sm-2 available-scene-divider available-scene">
<div class="wow fadeInUp" data-wow-delay="0.1s">
<div class="about-col">
<span onclick="document.getElementById('id01').style.display='two'" class="w3-black">
<div class="img">
<div class="set-rental-home-headline"><h2>Bank<br> </h2></div>
<img src="img/home-set-9.jpg" alt="Mary Poppins bank scene with classic teller windows from Front Row Theatrical Rental picture" class="img-fluid">
</div>
<h3> The Bank with single fly facade. </h3></span>
</div>
</div>
</div>
<div class="col-sm-2 available-scene-divider available-scene">
<div class="wow fadeInUp" data-wow-delay="0.1s">
<div class="about-col">
<span onclick="document.getElementById('id01').style.display='block'" class="w3-black">
<div class="img">
<div class="set-rental-home-headline"><h2>Talking shop<br> </h2></div>
<img src="img/home-set-8.jpg" alt="Mary Poppins Talking shop with counters and flying shelving from Front Row Theatrical Rental picture" class="img-fluid">
</div>
<h3> Ms. Corys Talking Shop with counters & Fly </h3></span>
</div>
</div>
</div>
<div class="col-sm-2 available-scene-divider available-scene">
<div class="wow fadeInUp" data-wow-delay="0.1s">
<div class="about-col">
<span onclick="document.getElementById('id01').style.display='block'" class="w3-black">
<div class="img">
<div class="set-rental-home-headline"><h2>Crossover<br> </h2></div>
<img src="img/home-set-7.jpg" alt="Mary Poppins exterior scene includes a hand-painted drop for the Bank's house from Front Row Theatrical Rental picture" class="img-fluid">
</div>
<h3>Banks' house exterior & crossover drop. </h3></span>
</div>
</div>
</div>
=============================================================================
Открытый модальный код:
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<header class="w3-container w3-red">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-span w3-red w3-xlarge w3-display-topright"><p>Close</p> ×</span>
<h2>Mary Poppins Scenes</h2>
</header>
<div class="w3-bar w3-border-bottom">
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'one')">Kitchen</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'two')">Bank</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'three')">Talking Shop</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'four')">Crossover</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'five')">Nursery</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'six')">Park Gates</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'seven')">Park</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'eight')">Rooftop</span>
<span class="tablink w3-bar-item w3-span" onclick="openCity(event, 'nine')">Parlor</span>
</div>
<div id="one" class="w3-container city">
<div class="scene-modal">
<div class="scene-modal-text col-sm-3">
<h1>Kitchen</h1>
<h3>"Spoon Full of Sugar"</h3>
<p>The Mary Poppins kitchen set is made of two double-sided, rolling wagons that come together. The flip side of the kitchen is the parlor.</p>
<p>This Mary Poppins Kitchen includes the necessary magic required by such a well know show. Included in the rental is a magic table that collapses, shelfs with plates on them that fall and then can be magically reset. Also a part of the rental are pots and pans that hang from a line-set and swing during Spoon Full of Sugar.</p></div>
<div class="col-sm-9 modal-img"> <img src="img/home-set-2.jpg" width="768" height="455" alt=""/> </div></div></div>
<div id="two" class="w3-container city">
<div class="scene-modal">
<div class="scene-modal-text col-sm-3">
<h1>Bank</h1>
<h3>"Precision and Order",<br>"A Man Has Dreams"</h3>
<p>The Bank is a flying teller wall that comes in for the scene.</p>
<p>Front Row Theatrical Rental recommends using a desk and chair set-up for the interior of the bank. (These are NOT provided)</p></div>
<div class="col-sm-9 modal-img"> <img src="img/home-set-9.jpg" width="768" height="455" alt=""/> </div></div></div>
<div id="three" class="w3-container city">
<div class="scene-modal">
<div class="scene-modal-text col-sm-3">
<h1>Talking Shop</h1>
<h3>"Supercalifragil-<br>isticexpialidocious"</h3>
<p>Front Row's Talking Shop set rental is comprised of a flying shelf that can house, client provided letters or other knick-knacks and two rolling counters.</p>
<p></p></div>
<div class="col-sm-9 modal-img"> <img src="img/home-set-8.jpg" width="768" height="455" alt=""/> </div></div></div>
</div>
<div class="w3-container w3-light-grey w3-padding col-sm-12">
<button class="w3-button w3-right w3-white w3-border"
onclick="document.getElementById('id01').style.display='none'">Close</button>
</div>