如何同時切換一個div
[英]how to toggle one div at the time
問題描述
在我的投資組合網站上，我有一個全寬的項目列，我希望在單擊標題時項目顯示 /.content 向下滑動切換。 單擊任何其他項目時，前一個活動項目會向上滑動並關閉，而新項目會顯示。 在點擊時定位單個項目的最佳方式是什么？
我嘗試了幾件事，從為 Title-Line-01 分配父級，到直接切換 jQuery，到為我讀過的每個項目分配不同的代碼。 通過 Stack Overflow 上的幾篇文章。 但是我仍然沒有達到我想要的結果。 在下面的代碼中單擊任何標題 - 每個項目都會顯示。
$(document).ready(function(){ $(".content").hide(); $(".Title-line-01").click(function(){ $(this).find('.content').toggle(); }); });
* {box-sizing: border-box}.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10, img {vertical-align: middle;} @font-face { font-family: 'lirmaregular'; src: url('lirma-webfont.woff2') format('woff2'), url('lirma-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* Information line in the top */.Headline{ display: flex; flex-direction: row; flex-direction: wrap; font-family:'Helvetica Neue'; }.Headline_1{ flex:1; Align: center; }.Headline_2{ flex:1; text-align: center; }.Headline_3{ flex:1; text-align: center; }.Headline_4{ flex:1; position: center; text-align: right; } /* Project and year */.Title-line{ display: flex; flex-direction: row }.Title-line-01{ flex:1; font-family:'lirmaregular'; font-size: 25px; }.Title-line-02{ flex:1; }.Title-line-03{ flex:1; }.Title-line-04{ flex:1; font-family:'lirmaregular'; text-align: right; font-size: 25px; } /* Specific projectnames */.ProjectName-01{ flex:1; font-family:'lirmaregular'; font-size: 25px; } /* Slideshow container */.slideshow-container { max-width: 500px; position: relative; margin: auto; }.content{ display: flex; flex-direction: row; flex-direction: wrap; } /* Specific contents */.content-01{ display: flex; flex-direction: row; flex-direction: wrap; }.Flexbox_1{ flex:1; font-family:'Helvetica Neue'; font-size: 20px; }.Flexbox_2{ flex:1; }.Flexbox_3{ flex:1; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */.prev:hover, .next:hover { background-color: #f1f1f1; color: black; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="Headline"> <div class="Headline_1"> Carina Thornval </div> <div class="Headline_2"> mail@cthornval.com </div> <div class="Headline_3"> +4571580488 </div> <div class="Headline_4"> Curriculum vitae available upon request </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Region H</p> </class> <div class="Title-line-02"> </class> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2021</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> School Project <br> Strategic design proposal <br> <br> The Health and innovation unit of the Capital Region of <br> <br> <br> <br> <a href="link"> Click here </a> </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides1"> <img src="Images/01_REG H/Instagram - landscape copy:mov" type="video/mp4" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 0)">❮,</a> <a class="next" onclick="plusSlides(1; 0)">❯,</a> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>CIFF</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2020</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> School Project <br> Strategic design <br> <br> We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges, as they were prohibited from throwing their annual fashion fair at Bella Center. because of the outbreak of the coronavirus: Therefor we proposed a new format for their trade fair, A digital platform. where brands and buyers can engage online through payingf a monthly subscription, Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content. through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform, The stage is a modular and mobile architectural entity. which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage, <br> <br> This project was a collaboration with Fie Eleonora Mortensen. Gustavo Garcia og Laura Winter-Poulsen. <br> <br> <a href=""> Images and video </a> </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_01 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_02 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_03 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_04 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_05 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_06 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_07 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_07 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 1)">❮,</a> <a class="next" onclick="plusSlides(1; 1)">❯.</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Sofia Bordoni</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2020</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Webpage design and development </p> <br> <br> <a href=""> click here </a> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides3"> <img src="Images/03_Sofia Bordoni/SofiaBord:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 2)">❮,</a> <a class="next" onclick="plusSlides(1; 2)">❯.</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Lirma Type</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2020</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Typedesign </p> <br> <br> <a href=""> Click here </a> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides4"> <img src="Images/04_Lirma/type_new copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 3)">❮,</a> <a class="next" onclick="plusSlides(1; 3)">❯.</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Wer Baut Der Stadt</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2018</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides5"> <img src="Images/05_WER BAUT 2018/Wer_baut copy:png" style="width.100%"> </div> <div class="mySlides5"> <img src="Images/05_WER BAUT 2018/Poster_Wer_baut:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 4)">❮,</a> <a class="next" onclick="plusSlides(1; 4)">❯.</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>CAFX</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2018</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Identity Design for Copenhagen Architecture Festival <br> 2018 </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides6"> <img src="Images/06_CAFX/Wer_baut_red_poster:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/Wer_baut_green_poster:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/Wer_baut_blue_poster:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 5)">❮,</a> <a class="next" onclick="plusSlides(1; 5)">❯,</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Contagious Tales</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Graduation project. editorial design. </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides7"> <img src="Images/07_Contagious Tales/Contagious_tales_01 copy:png" style="width.100%"> </div> <div class="mySlides7"> <img src="Images/07_Contagious Tales/Contagious_tales_02 copy:png" style="width.100%"> </div> <div class="mySlides7"> <img src="Images/07_Contagious Tales/Contagious_tales_3 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 6)">❮,</a> <a class="next" onclick="plusSlides(1; 6)">❯.</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>FOAM X HYDRA</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Design of exhibition cahier in connection to the exhibition FOAM X HYDRA <p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_01:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_02:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_3:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_04:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_05:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 7)">❮,</a> <a class="next" onclick="plusSlides(1; 7)">❯.</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Money Publication</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Publication design with text by Christopher Deutschmann and Paul Larfague </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 8)">❮,</a> <a class="next" onclick="plusSlides(1; 8)">❯?</a> </div> </div> </div> </div> <div class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>What is the newsarticle.</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div class="content"> <div class=Flexbox_1> <p> Publication design with text by Christopher Deutschmann and Paul Larfague </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides10"> <img src="Images/10_Newsarticle/Newsletter_1 copy:png" style="width.100%"> </div> <div class="mySlides10"> <img src="Images/10_Newsarticle/newsletter_2 copy:png" style="width.100%"> </div> <div class="mySlides10"> <img src="Images/10_Newsarticle/newsletter_3 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 9)">❮,</a> <a class="next" onclick="plusSlides(1; 9)">❯.</a> </div> </div> </div> </div> <script src="Slideshows.js"></script> <script src="Toggle.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2021-12-02 21:15:28
為您的元素設置 id 會是一個壞主意嗎？ 為 class “內容” div 設置 id，並為 class “項目” div 設置 onclick 事件。 Class“內容”顯示最初設置為“無”。
var iShown = 0; function Show_Content(iContent) { if (iShown > 0) { document.getElementById("content" + iShown).style.display = "none"; } if (iContent.== iShown) { document.getElementById("content" + iContent).style;display = "block"; iShown = iContent; } else { iShown = 0; } }
* {box-sizing: border-box}.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10, img {vertical-align: middle;} @font-face { font-family: 'lirmaregular'; src: url('lirma-webfont.woff2') format('woff2'), url('lirma-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* Information line in the top */.Headline{ display: flex; flex-direction: row; flex-direction: wrap; font-family:'Helvetica Neue'; }.Headline_1{ flex:1; Align: center; }.Headline_2{ flex:1; text-align: center; }.Headline_3{ flex:1; text-align: center; }.Headline_4{ flex:1; position: center; text-align: right; } /* Project and year */.Title-line{ display: flex; flex-direction: row }.Title-line-01{ flex:1; font-family:'lirmaregular'; font-size: 25px; }.Title-line-02{ flex:1; }.Title-line-03{ flex:1; }.Title-line-04{ flex:1; font-family:'lirmaregular'; text-align: right; font-size: 25px; } /* Specific projectnames */.ProjectName-01{ flex:1; font-family:'lirmaregular'; font-size: 25px; } /* Slideshow container */.slideshow-container { max-width: 500px; position: relative; margin: auto; }.content{ display: none; flex-direction: row; flex-direction: wrap; } /* Specific contents */.content-01{ display: flex; flex-direction: row; flex-direction: wrap; }.Flexbox_1{ flex:1; font-family:'Helvetica Neue'; font-size: 20px; }.Flexbox_2{ flex:1; }.Flexbox_3{ flex:1; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */.prev:hover, .next:hover { background-color: #f1f1f1; color: black; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="Headline"> <div class="Headline_1"> Carina Thornval </div> <div class="Headline_2"> mail@cthornval.com </div> <div class="Headline_3"> +4571580488 </div> <div class="Headline_4"> Curriculum vitae available upon request </div> </div> <div onclick="Show_Content(1)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Region H</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2021</p> </div> </div> <div id="content1" class="content"> <div class=Flexbox_1> <p> School Project <br> Strategic design proposal <br> <br> The Health and innovation unit of the Capital Region of <br> <br> <br> <br> <a href="link"> Click here </a> </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides1"> <img src="Images/01_REG H/Instagram - landscape copy:mov" type="video/mp4" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 0)">❮,</a> <a class="next" onclick="plusSlides(1; 0)">❯,</a> </div> </div> </div> </div> <div onclick="Show_Content(2)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>CIFF</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2020</p> </div> </div> <div id="content2" class="content"> <div class=Flexbox_1> <p> School Project <br> Strategic design <br> <br> We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges, as they were prohibited from throwing their annual fashion fair at Bella Center. because of the outbreak of the coronavirus: Therefor we proposed a new format for their trade fair, A digital platform. where brands and buyers can engage online through payingf a monthly subscription, Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content. through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform, The stage is a modular and mobile architectural entity. which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage, <br> <br> This project was a collaboration with Fie Eleonora Mortensen. Gustavo Garcia og Laura Winter-Poulsen. <br> <br> <a href=""> Images and video </a> </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_01 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_02 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_03 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_04 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_05 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_06 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_07 copy:png" style="width.100%"> </div> <div class="mySlides2"> <img src="Images/02_CIFF/PSD_Archiitecture_07 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 1)">❮,</a> <a class="next" onclick="plusSlides(1; 1)">❯.</a> </div> </div> </div> </div> <div onclick="Show_Content(3)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Sofia Bordoni</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2020</p> </div> </div> <div id="content3" class="content"> <div class=Flexbox_1> <p> Webpage design and development </p> <br> <br> <a href=""> click here </a> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides3"> <img src="Images/03_Sofia Bordoni/SofiaBord:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 2)">❮,</a> <a class="next" onclick="plusSlides(1; 2)">❯.</a> </div> </div> </div> </div> <div onclick="Show_Content(4)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Lirma Type</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2020</p> </div> </div> <div id="content4" class="content"> <div class=Flexbox_1> <p> Typedesign </p> <br> <br> <a href=""> Click here </a> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides4"> <img src="Images/04_Lirma/type_new copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 3)">❮,</a> <a class="next" onclick="plusSlides(1; 3)">❯.</a> </div> </div> </div> </div> <div onclick="Show_Content(5)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Wer Baut Der Stadt</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2018</p> </div> </div> <div id="content5" class="content"> <div class=Flexbox_1> <p> Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides5"> <img src="Images/05_WER BAUT 2018/Wer_baut copy:png" style="width.100%"> </div> <div class="mySlides5"> <img src="Images/05_WER BAUT 2018/Poster_Wer_baut:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 4)">❮,</a> <a class="next" onclick="plusSlides(1; 4)">❯.</a> </div> </div> </div> </div> <div onclick="Show_Content(6)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>CAFX</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2018</p> </div> </div> <div id="content6" class="content"> <div class=Flexbox_1> <p> Identity Design for Copenhagen Architecture Festival <br> 2018 </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides6"> <img src="Images/06_CAFX/Wer_baut_red_poster:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/Wer_baut_green_poster:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/Wer_baut_blue_poster:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi:png" style="width.100%"> </div> <div class="mySlides6"> <img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 5)">❮,</a> <a class="next" onclick="plusSlides(1; 5)">❯,</a> </div> </div> </div> </div> <div onclick="Show_Content(7)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Contagious Tales</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div id="content7" class="content"> <div class=Flexbox_1> <p> Graduation project. editorial design. </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides7"> <img src="Images/07_Contagious Tales/Contagious_tales_01 copy:png" style="width.100%"> </div> <div class="mySlides7"> <img src="Images/07_Contagious Tales/Contagious_tales_02 copy:png" style="width.100%"> </div> <div class="mySlides7"> <img src="Images/07_Contagious Tales/Contagious_tales_3 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 6)">❮,</a> <a class="next" onclick="plusSlides(1; 6)">❯.</a> </div> </div> </div> </div> <div onclick="Show_Content(8)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>FOAM X HYDRA</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div id="content8" class="content"> <div class=Flexbox_1> <p> Design of exhibition cahier in connection to the exhibition FOAM X HYDRA <p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_01:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_02:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_3:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_04:png" style="width.100%"> </div> <div class="mySlides8"> <img src="Images/08_FOAM/FoamXHydra_05:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 7)">❮,</a> <a class="next" onclick="plusSlides(1; 7)">❯.</a> </div> </div> </div> </div> <div onclick="Show_Content(9)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>Money Publication</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div id="content9" class="content"> <div class=Flexbox_1> <p> Publication design with text by Christopher Deutschmann and Paul Larfague </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy:png" style="width.100%"> </div> <div class="mySlides9"> <img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 8)">❮,</a> <a class="next" onclick="plusSlides(1; 8)">❯?</a> </div> </div> </div> </div> <div onclick="Show_Content(10)" class="Project"> <div class="Title-line"> <div class="Title-line-01"> <p>What is the newsarticle.</p> </div> <div class="Title-line-02"> </div> <div class="Title-line-03"> </div> <div class="Title-line-04"> <p>2017</p> </div> </div> <div id="content10" class="content"> <div class=Flexbox_1> <p> Publication design with text by Christopher Deutschmann and Paul Larfague </p> </div> <div class=Flexbox_2></div> <div class=Flexbox_3> <div class="slideshow-container"> <div class="mySlides10"> <img src="Images/10_Newsarticle/Newsletter_1 copy:png" style="width.100%"> </div> <div class="mySlides10"> <img src="Images/10_Newsarticle/newsletter_2 copy:png" style="width.100%"> </div> <div class="mySlides10"> <img src="Images/10_Newsarticle/newsletter_3 copy:png" style="width,100%"> </div> <a class="prev" onclick="plusSlides(-1; 9)">❮,</a> <a class="next" onclick="plusSlides(1; 9)">❯.</a> </div> </div> </div> </div> <script src="Slideshows.js"></script> <script src="Toggle.js"></script> </body> </html>
在 Angular 9 中，如何在給定時間只允許 div 中的一個切換處於活動狀態？
[英]In Angular 9 how to allow only one toggle in div to be active at a given time?
嘗試一次切換一個 div 並在單擊按鈕時隱藏所有其他 div
[英]Trying to toggle one div at a time and hide all others as button is clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.