同一页面上有多个w3Schools灯箱（模态框）：模态框仅显示第一个模态的内容

时间：2018-07-23 17:59:56

标签： javascript html css modal-dialog lightbox

我还是HTML / CSS的新手，我也不了解Javascript。我需要一个带有按钮选项卡的页面上的图像三个灯箱，其中每个按钮都会显示一个带有灯箱的页面。我最初使用W3Schools灯箱代码（https://www.w3schools.com/howto/howto_js_lightbox.asp），但是在这里和那里都对其进行了更改。

选项卡中的所有图像看起来都不错，但是当您单击它们时，它们会弹出并带有第一个灯箱/模态的内容。我还注意到，我的上一个/下一个按钮现在仅浏览内容一次，然后空白单击几下。这不是我最关心的问题，但也许它可以使某人了解问题所在。

我尝试了许多可能的解决方案，包括更改类名和ID名称（因为我了解到您不应该使用具有相同ID名称的多个div），但是它对我不起作用，因此我带来了代码回到我如何开始。我什至更改了模式框拾取的幻灯片编号，以便第二个模式框的幻灯片编号为4,5,6而不是1,2,3，但仍然没有运气。有什么想法吗？

谢谢！

HTML，CSS和JAVASCRIPT。请注意，JavaScript位于HTML文件中，因为这就是我在文档中使用的方式，因此我认为我将保持所有内容的一致性。看起来代码中也有很多错误-抱歉，我不知道如何解决它们：/ 

html
{
    width:500px;
    margin:auto;
}

/* BUTTON COLORS */
.light-blue
    {background-color: #4e9abe;}
.pea-green
    {background-color: #a39a4b;}
.teal
    {background-color: #298e86;}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  line-height:1.3;
}



/* The Close Button */
.close {
  color: #999900;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #4e7977;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.next a, .prev a
{
    text-decoration: none;
}


.modal-images
{max-height:75vh;
    max-width:auto;
    border-radius:5%;
    border:2px dotted;
    display: inline;
    }

/* Style the tab */
.tab {
    overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
   
    display: inline-block;
    width:133px;
    height:133px;
    line-height: 20px;
    margin:4px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    letter-spacing: 2px;
    font-size:18px;
    font-weight:bold;
    text-transform: uppercase;
    border:none;
}


.topright:hover {color: red;}

/* Change background color of buttons on hover */
.tab button:hover {
    background: #746572;}

/* Create an active/current tablink class */

.tab button.active {
    border: 3px #505050 dashed;
    padding:5px;
    opacity: 0.5;
    outline:none;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    width:100%;
}


/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}
<!DOCTYPE html>


    
    
<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++)
    {slides[i].style.display = "none";}
    for (i = 0; i < dots.length; i++)
    {dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;}
</script>


<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39) {document.querySelector('.next').click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>
  
    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>
  
    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>   
   
    
    
       
    
    
   
</div>
  

      
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>


</div>
</div>  

<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>
    
    
    <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
    
  
    
</html>

2 个答案:

答案 0 :(得分：0)

您的脚本无法正常工作，因为您已将其放置在尝试访问的DOM元素之前。 HTML文档是从上到下解析的，因此脚本将在创建元素之前执行。因此，您需要将脚本放置在DOM元素之后。

另外，您有9个元素，其类为mySlides，因此您的showSlide函数将无法使用。我更改了您的逻辑，以检查要显示的幻灯片的数量是大于3（将其设置为1）还是小于1（将其设置为3）。

html
{
    width:500px;
    margin:auto;
}

/* BUTTON COLORS */
.light-blue
    {background-color: #4e9abe;}
.pea-green
    {background-color: #a39a4b;}
.teal
    {background-color: #298e86;}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  line-height:1.3;
}



/* The Close Button */
.close {
  color: #999900;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #4e7977;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.next a, .prev a
{
    text-decoration: none;
}


.modal-images
{max-height:75vh;
    max-width:auto;
    border-radius:5%;
    border:2px dotted;
    display: inline;
    }

/* Style the tab */
.tab {
    overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
   
    display: inline-block;
    width:133px;
    height:133px;
    line-height: 20px;
    margin:4px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    letter-spacing: 2px;
    font-size:18px;
    font-weight:bold;
    text-transform: uppercase;
    border:none;
}


.topright:hover {color: red;}

/* Change background color of buttons on hover */
.tab button:hover {
    background: #746572;}

/* Create an active/current tablink class */

.tab button.active {
    border: 3px #505050 dashed;
    padding:5px;
    opacity: 0.5;
    outline:none;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    width:100%;
}


/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}
<!DOCTYPE html>
<html>  



<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {var e = e || window.event;
    if (e.keyCode == 37) {
    e.preventDefault();
    document.querySelectorAll('.prev')[0].click();}
    if (e.keyCode == 27) {
    e.preventDefault();
    document.querySelectorAll('.close')[0].click();}    
    else if (e.keyCode == 39) {
    e.preventDefault();
    document.querySelectorAll('.next')[0].click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>
  
    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>
  
    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>   
   
    
    
       
    
    
   
</div>
  

      
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>
    

    
    
     <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>


</div>
</div>  

<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
    
    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
    
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>
    
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>
<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {
    showSlides(slideIndex += n);
    }
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    //var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > 3) {slideIndex = 1}
    if (n < 1) {slideIndex = 3}
    for (i = 0; i < slides.length; i++)
    {slides[i].style.display = "none";}
    //for (i = 0; i < dots.length; i++)
    //{dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    //dots[slideIndex-1].className += " active";
    //captionText.innerHTML = dots[slideIndex-1].alt;
    }
</script>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
    
  
    
</html>

答案 1 :(得分：0)

您实际上只想要一个具有#myModal id的元素，因此，基本上，我只是删除了一堆冗余代码并将您的.tabcontent标记移到模态标记之外。然后，我将currentSlide（）函数参数更改为它们与图像总数相对应的索引。这样，例如，当您单击image5时，模态实际上会打开到image5。参见http://jsfiddle.net/qryu0dmL/19/ 

<script>
    // Open the Modal
    function openModal() 
    {document.getElementById('myModal').style.display = "block";}
    // Close the Modal
    function closeModal()
    {document.getElementById('myModal').style.display = "none";}
    var slideIndex = 1;
    showSlides(slideIndex);
    // Next/previous controls
    function plusSlides(n)
    {showSlides(slideIndex += n);}
    // Thumbnail image controls
    function currentSlide(n) 
    {showSlides(slideIndex = n);}
    function showSlides(n)
    {var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++)
    {slides[i].style.display = "none";}
    for (i = 0; i < dots.length; i++)
    {dots[i].className = dots[i].className.replace(" active", "");}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;}
</script>


<!--JAVASCRIPT FOR KEYBOARD NAVIGATION (PREV, NEXT, AND ESCAPE BUTTONS)-->
<script>
    document.onkeydown = function (e) 
    {e = e || window.event;
    if (e.keyCode == 37) {document.querySelector('.prev').click();}
    if (e.keyCode == 27) {document.querySelector('.close').click();}    
    else if (e.keyCode == 39) {document.querySelector('.next').click();}};
</script>



<div class="tab">
    <button class="tablinks pea-green" onclick="openCity(event, 'tab1')">Tab 1</button>

    <button class="tablinks light-blue" onclick="openCity(event, 'tab2')">Tab 2</button>

    <button class="tablinks teal" onclick="openCity(event, 'tab3')">Tab 3 </button>
</div>


<div id="tab1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="openModal();currentSlide(1)">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="openModal();currentSlide(2)">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="openModal();currentSlide(3)">
</div>  
<div id="tab2" class="tabcontent">
   <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="openModal();currentSlide(4)">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="openModal();currentSlide(5)">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="openModal();currentSlide(6)">
</div>  
<div id="tab3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">&times;</span>
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="openModal();currentSlide(7)">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="openModal();currentSlide(8)">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="openModal();currentSlide(9)">
</div>  


    <!--CLICKED-ON IMAGES IN MODAL BOX-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">

    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image1" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 1, Modal 1
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image2" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 2, Modal 1
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image3" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 3, Modal 1
    </div>



    <!--CLICKED-ON IMAGES IN MODAL BOX-->


    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image4" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 4, Modal 2
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image5" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 5, Modal 2
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image6" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 6, Modal 2
    </div>



    <!--CLICKED-ON IMAGES IN MODAL BOX-->


    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image7" class="modal-images" onclick="currentSlide(2)">
    <br>Modal Box Image 7, Modal 3
    </div>
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image8" class="modal-images" onclick="currentSlide(3)">
    <br>Modal Box Image 8, Modal 3
    </div> 
    <div class="mySlides">
    <img src="http://placehold.it/120x120&text=image9" class="modal-images" onclick="currentSlide(1)">
    <br>Modal Box Image 9, Modal 3
    </div>

         <!-- NEXT/PREVIOUS CONTROLS -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
相关问题
最新问题