按下按钮后如何显示一行图像？

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>