按下按鈕后如何顯示一行圖像？

Question

我希望能夠按下如下圖所示的“按鈕”之一。 按下按鈕時，3 個圖像的相應部分會出現/隱藏。 如，如果我按下“Tapas”，則僅顯示小吃圖像，如果按下“main”，則僅隱藏/顯示主圖像。

這是我的 HTML 代碼：

 var button = document.querySelector('.load-more-button'); var tapas = document.querySelectorAll('.show-tapas'); button.addEventListener("click", function(e) { tapas.forEach(b => $(b).toggle()); })

 .show-tapas { display: none; }.show-tapas.showing { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div class="grid-portfolio" id="portfolio"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a href="#">Tapas</a> </div> </div> </div> <div class="row show-tapas"> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a href="#">Main Courses</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_main_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_main_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_main_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a href="#">Dessert</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> </div>

Answer 1

使用一些 jquery 來做到這一點。

我在標簽中有一些規則。 （屬性img-data-class ）

並且包含您的圖像的行應該放置您的 class 名稱。

 function toggleImage(elm){ var _this = $(elm); var _class = _this.attr('img-data-class'); $('.' + _class).toggle(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div class="grid-portfolio" id="portfolio"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a> </div> </div> </div> <div class="row show-tapas"> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a> </div> </div> </div> <div class="row show-main"> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_main_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_main_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_main_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a> </div> </div> </div> <div class="row show-dessert"> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> </div> </div>

Answer 2

一切都很完美，包括您創建的 function，唯一的問題是您沒有將main courses圖像和dessert圖像wrap到 div show-tapas-2和show-tapas-3 ，並給它們a標簽 class load-more-button-2和load-more-button-3

就像您對Tapas圖像所做的那樣，然后您可以將 function 用於每個相應的內容

 var button1 = document.querySelector('.load-more-button'); var tapas1 = document.querySelectorAll('.show-tapas'); button1.addEventListener("click", function(e) { tapas1.forEach(b => $(b).toggle()); }) var button2 = document.querySelector('.load-more-button-2'); var tapas2 = document.querySelectorAll('.show-tapas-2'); button2.addEventListener("click", function(e) { tapas2.forEach(b => $(b).toggle()); }) var button3 = document.querySelector('.load-more-button-3'); var tapas3 = document.querySelectorAll('.show-tapas-3'); button3.addEventListener("click", function(e) { tapas3.forEach(b => $(b).toggle()); })

 .show-tapas { display: none; }.show-tapas.showing { display: block; }.show-tapas-2 { display: none; }.show-tapas-2.showing { display: block; }.show-tapas-3 { display: none; }.show-tapas-3.showing { display: block; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="grid-portfolio" id="portfolio"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a href="#">Tapas</a> </div> </div> </div> <div class="row show-tapas"> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button-2"> <a href="#">Main Courses</a> </div> </div> </div> <div class="row show-tapas-2"> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button-3"> <a href="#">Dessert</a> </div> </div> </div> <div class="row show-tapas-3"> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> </div> </div>