在点击功能上隐藏和显示文本（HTML、CSS、JS）

Question

I'm currently developing a website with bootstrap and I'm trying to build a function to show and hide a text whenever I click on a thumbnail, without the need to load another page.我目前正在开发一个带有引导程序的网站，并且我正在尝试构建一个功能来在我单击缩略图时显示和隐藏文本，而无需加载另一个页面。

It would be ideal to have some kind of a "radio type input" to toggle between the contents shown through clicks on the thumbnails.最好有某种“无线电类型输入”来通过单击缩略图在显示的内容之间切换。

Beneath the sidebar are the thumbnails and on the right is the main content.侧边栏下方是缩略图，右侧是主要内容。 I'd like the page to have the text as a "placeholder" and whenever i click on a thumbnail with a image, the image should appear replacing the text shown as the main content.我希望页面将文本作为“占位符”，并且每当我单击带有图像的缩略图时，图像应该会替换显示为主要内容的文本。

At the moment if i click on a thumbnail it looks like this.目前，如果我单击缩略图，它看起来像这样。

I'll keep on trying by myself but i'd be really grateful if you guys could help me out.我会继续自己尝试，但如果你们能帮助我，我将不胜感激。

Stay safe and healthy!保持安全和健康！

 function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = imgs.src; imgText.innerHTML = imgs.alt; expandImg.parentElement.style.display = "block"; }

 <!doctype html> <html lang="en"> <head> <title>Christoph Urwalek - The Twin Tower of Arts</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="../../assets/css/style.css"> <link href="../../assets/css/i20.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../assets/js/ubertooltip.js"></script> </head> <body onLoad="loadTip()"> <!-- START Mobile Nav--> <header> <nav class="d-xl-none headerMenu navbar fixed-top" onclick="openNav()"> &#9776; <h5 id="headerLogo">Christoph Urwalek</h5> </nav> </header> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="../canvaswork/painting.html">painting</a> <a href="../paperwork/drawing.html">drawing</a> <a href="../collagework/collage.html">collage</a> <a href="../videowork/video.html">video</a> <br> <br> <a href="../current/aktuell.html">current</a> <a href="../text/text.html">text</a> <a href="../biography/bio.html">biography</a> <a href="../contact/impressum.html">contact</a> </div> </div> <!-- END Mobile Nav--> <!--START Wrapper--> <div class="container-fluid my-container align-items-center"> <!--START Sidebar --> <div class="row my-row"> <div class="col-md-3 "> <nav class="sidebar-header sidebar"> <li><a href="../index.html"><b>Christoph Urwalek</b></a></li> <br> <li><a href="../canvaswork/painting.html">painting</a></li> <li><a href="../paperwork/drawing.html">drawing</a></li> <li><a class="active" href="../collagework/collage.html">collage</a></li> <li><a href="../videowork/video.html">video</a></li> <li> <a> </a> </li> <li><a href="../current/aktuell.html">current</a></li> <li><a href="../text/text.html">text</a></li> <li><a href="../biography/bio.html">biography</a></li> <li><a href="../contact/impressum.html">contact</a></li> <br> <div class="thumbnailContainer"> <img href="/collagework/the_twin_towers_of_arts_in_education.html" src="../assets/img/The Twin Towers of Arts in Education/TextLogo.png" alt="" class="img-thumbnail border-0 img-thumbnail-desktop"> <img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-01__.jpg" alt="" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);"> <img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-02__.jpg" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);"> <img src="../assets/img/The Twin Towers of Arts in Education/Art-Education-Tower-03__.jpg" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);"> </div> <!--END Thumbnaill Navbar--> <div> </nav> </div> <!--END Sidebar --> <!--START Wandcollage--> <div class="col-md-9 "> <!--main content--> <p class="text-justify textMargin "> <b>The Twin Towers of Arts in Education</b><br><br> Siebdruck auf Papier, 95 x 65 cm, 2013<br><br> Die Displays veranschaulichen in Diagrammstruktur Perspektiven künstlerischer Handlungsformen in Bildungsprozessen unterschiedlicher Partikularkulturen. Jede Ebene der beiden Türme repräsentiert einen Konzeptrahmen, der Diskursformen mittels vier Axiomen zeigt: Reproduktion, Affirmation, Dekonstruktion und Transformation. Der linke Turm repräsentiert Wissensproduktion in künstlerischen Prozessen, während der rechte Turm Wissensproduktion in analogen Bildungsprozessen repräsentiert. Die Konzeptrahmen in den Türmen bewegen sich zwischen kontextellen Strukturen und gesellschaftlichen Strukturen. Alle Eckpunkte der jeweiligen Axiome sind entsprechend miteinander verbunden und stehen sich im Kommunikationsprozess kritisch gegenüber. Zwischen den beiden Türmen befindet sich die Achse der Kritikalität. Sie ist vermittelnd verbunden mit den einzelnen Diskursformen. Auf ihr entsteht die Perspektive eines Gegenbewusstseins, das die Achse des vorherrschenden Bewusstseins in einem transformativen Lernprozess durchkreuzt. Die Arbeit orientiert sich an Stephen Willats Konzeption eines Parameter Modells, das zwischen unterschiedlichen existierenden und möglichen ideologischen Konzeptrahmen vermittelt. </p> <div class="container expandedImgSize d-flex justify-content-center "> <span onclick="this.parentElement.style.display='none'"></span> <img class="img-fluid" id="expandedImg" src=""> <div id="imgtext"> <!--TEXT EINFÜGEN--> </div> </div> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection-Montage-01_.jpg" alt="" style="width:400px;"> <div class="caption"> <p id="captionStyle">Collection, Performance, &copy; Barbara Höller<br>2013</p> </div> </a> </div> </div> <!--section--> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection_.jpg" alt="" style="width:400px;"> <div class="caption"> <p style="margin-top: 5px;" id="captionStyle"> Collection, Performance, &copy; Christian Helbock<br> 2013 </p> </div> </a> </div> </div> <!--section--> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection-Performance-10_.jpg" alt="" style="width:400px;"> <div class="caption"> <p id="captionStyle">Collection, Performance, &copy; Barbara Höller<br>2013</p> </div> </a> </div> </div> <!--section--> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection-Performance-13_.jpg" alt="" style="width:400px;"> <div class="caption"> <p id="captionStyle">Collection, Performance, &copy; Barbara Höller<br>2013 </p> </div> </a> </div> </div> <!--section--> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection-Performance-15_.jpg" alt="" style="width:400px;"> <div class="caption"> <p id="captionStyle">Collection, Performance, &copy; Barbara Höller <br>2013</p> </div> </a> </div> </div> <!--section--> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection-Performance-16_.jpg" alt="" style="width:400px;"> <div class="caption"> <p id="captionStyle">Collection, Performance, &copy; Barbara Höller <br>2013</p> </div> </a> </div> </div> <!--section--> <!--section--> <div class="d-xl-none"> <div id="firstThumbnail" class="mobileGallery thumbnail d-flex justify-content-center imagePreview"> <a href=""> <img src="../assets/img/collection/Collection-Montage-02_.jpg" alt="" style="width:400px;"> <div class="caption"> <p id="captionStyle">Zusammenarbeit (Together), Montage: &copy; Christian Helbock<br> 2013</p> </div> </a> </div> </div> <!--section--> </div> <!-- d-xl-none --> <!--section--> </div> <!--col-md-9--> </div> </div> <!--END Wrapper--> <script src="../assets/js/main.js"> </script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script> </body> </html>

Answer 1

Wrote a brief example on how to incorporate a basic image selector.写了一个关于如何合并基本图像选择器的简短示例。

 function myFunction(img) { let currImage = img.target; let image = document.querySelector("#expandedImg"); image.setAttribute('src', currImage.src); } let images = document.querySelectorAll(".thumbnailContainer > img"); images.forEach((img) => { img.addEventListener("mouseover", myFunction, true); });

 .thumbnailContainer > img { cursor: pointer; }

 <html lang="en"> <head> <title>Basic Image Selector</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <div class="thumbnailContainer"> <img src="https://i.picsum.photos/id/344/200/300.jpg?hmac=hFZM-uJoRMyNATe_kjGvS2NGGP60jqqP64vpGQ98VAo" alt="" id="img-thumbnail border-0 img-thumbnail-desktop" /> <img src="https://i.picsum.photos/id/509/200/300.jpg?hmac=Y2Mtq5PEipyaFNlDH01CoNhW9to1T8GCuTf6yUSH-TY" alt="" id="img-thumbnail border-0 img-thumbnail-desktop" /> <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" alt="###" id="img-thumbnail border-0 img-thumbnail-desktop" /> <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="###" id="img-thumbnail border-0 img-thumbnail-desktop" /> </div> <img id="expandedImg"></img> </body> </html>

在点击功能上隐藏和显示文本（HTML、CSS、JS）

问题描述

1 个解决方案

解决方案1
0 2022-07-21 21:52:47

在点击功能上隐藏和显示文本（HTML、CSS、JS）

问题描述

1 个解决方案

解决方案1 0 2022-07-21 21:52:47

解决方案1
0 2022-07-21 21:52:47