如何同时切换一个div
[英]how to toggle one div at the time
问题描述
On my portfolio website, I have a full-width column of projects, where Ii wish that upon clicking the title the project display /.content slidetoggles downwards.
在我的投资组合网站上，我有一个全宽的项目列，我希望在单击标题时项目显示 /.content 向下滑动切换。 Upon clicking any other project the former active project slides up and closes, whereas the new project displays.单击任何其他项目时，前一个活动项目会向上滑动并关闭，而新项目会显示。 What is thee best way of targetting individual projects on click?在点击时定位单个项目的最佳方式是什么？
I have tried several things, from assigning a parent to the Title-Line-01, to straight-forward toggle jQuery, to assigning a different code to every single project I've read.我尝试了几件事，从为 Title-Line-01 分配父级，到直接切换 jQuery，到为我读过的每个项目分配不同的代码。 through several articles here on Stack Overflow.通过 Stack Overflow 上的几篇文章。 But I still have not achieved the result I want.但是我仍然没有达到我想要的结果。 In the code below upon clicking any title - every projects displays.在下面的代码中单击任何标题 - 每个项目都会显示。
$(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
Would it be a bad idea to set id's for your elements?为您的元素设置 id 会是一个坏主意吗？ Set id's for the class "content" div's, and set onclick event for the class "Project" div's.为 class “内容” div 设置 id，并为 class “项目” div 设置 onclick 事件。 Class "content" display is initially set to "none". 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jquery在时间切换一个div - jquery toggle one div at time
在 Angular 9 中，如何在给定时间只允许 div 中的一个切换处于活动状态？ - In Angular 9 how to allow only one toggle in div to be active at a given time?
使用切换类时如何仅使一个div一次切换？ - How to only make one div has toggled at one time when using toggle class?
一次切换一个Div /单击打开Div，它将关闭 - Toggle One Div at a Time / Click on Open Div and it will close
如何在正确的时间和星期几切换 div - How to toggle a div in correct time and day of the week
如何从一个按钮切换div - How to toggle a div from one button
javascript切换以在一组中一次仅显示一个div - javascript toggle to show only one div at a time in a group
一次只显示一个幻灯片切换div - Allow only one slide toggle div to show at a time
尝试一次切换一个 div 并在单击按钮时隐藏所有其他 div - Trying to toggle one div at a time and hide all others as button is clicked
用一个onclick切换2 div - Toggle 2 div with one onclick
相关标签