我正在使用https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_tab的开源选项卡式模式。
我想拥有大量图像，然后单击这些图像时，将启动一个与它们各自的选项卡相对应的模式选项卡，而不是每次都简单地转到模式的第一个选项卡。 （即，如果您选择图像3，它将弹出模式选项卡3。）下面是我的代码，我该怎么做？
跳过----它希望我添加更多文本，但我认为我已经很好地解释了我要寻找的内容。我很欣赏网站想要的细节，但是如果不需要细节并且有很多代码出了问题，为什么它无缘无故需要更多文本----跳过
图像代码：
<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>