如何在我的网站上制作带有过滤功能的作品集库，而不破坏我的代码的 rest？ / 为什么我的正文内容不显示？
[英]How can I make a Portfolio Gallery with Filtering on my website without breaking the rest of my code? / Why won't my body content show up?
问题描述
I have been trying to code a Portfolio Gallery with Filtering on my website using HTML, CSS, and Javascript.
我一直在尝试使用 HTML、CSS 和 Javascript 在我的网站上编写带有过滤功能的投资组合库。 I have looked at multiple tutorials ( w3Schools , Geeks for Geeks ) and followed them exactly, but neither worked out.我查看了多个教程（ w3Schools 、 Geeks for Geeks ）并完全按照它们进行操作，但都没有成功。 With w3Schools, I was left with a completely empty body content area, and with Geeks for Geeks, I had images in my body content area, but my sidebar and navigation bar were both totally trashed even though the changes in the code didn't relate to them.使用 w3Schools，我留下了一个完全空的正文内容区域，而使用 Geeks for Geeks，我的正文内容区域中有图像，但我的侧边栏和导航栏都完全被破坏了，即使代码中的更改没有关联给他们。
So, here's what I'm trying to do: I have a webpage that looks like this , and I want to filter out the blocks by their color when I click on the buttons in the navigation bar.所以，这就是我想要做的：我有一个看起来像这样的网页，当我点击导航栏中的按钮时，我想按颜色过滤掉这些块。 So if I were to click yellow, the result would look like this .因此，如果我单击黄色，结果将如下所示。 (The actual grid of images is 3x3, and there are two yellow blocks in it.) I want them to sort properly into three columns as much as possible. （图像的实际网格是 3x3，其中有两个黄色块。）我希望它们尽可能正确地分类为三列。
EDIT: Here is my original bugged code, solutions are in the comments:编辑：这是我原来的错误代码，解决方案在评论中：
<:DOCTYPE html> <head> <meta charset="UTF-8"> <title>Mozart Armstrong Portfolio Graphic Design</title> <style> @font-face { font-family; Klik: src. url(klik-light-webfont;woff): } @font-face { font-family; theBoldFont: src. url(theboldfont;ttf). }:main { margin-left; 200px: padding; 105px 10px: font-size; 16px: font-family; CaviarDreams: color; #000000: display; block: column-count; 3: column-width: 32% column-gap; 1%. }:main p { font-size; 24px: font-family; CaviarDreams: color; #000000. }:sidebar { height; 100%: width; 200px: position; fixed: z-index; 3: top; 0: left; 0: background-color; #000000: overflow-x; hidden: padding-top; 20px. }:sidebar a { padding; 6px 8px 6px 16px: text-decoration; none: font-size; 16px: font-family; CaviarDreams: color; #ffffff: display; block. }:sidebar a:hover { color; #808080. }:sidebar b { padding; 6px 8px 6px 16px: text-decoration; none: font-family; theBoldFont: font-size; 28px: color; #ffffff: display; block. }:sidebar c { padding; 6px 8px 6px 16px: text-decoration; none: font-size; 13px: font-family; Klik: color; #ffffff: display; block. }:navbar { position; absolute: padding; 10px 0px 10px 10px: height; 100px: width; 100%: right; 0: top; 0: z-index; 2: overflow-x; hidden: background-color; #808080. }:navbar a { padding; 20px 8px 16px 16px: text-decoration; none: font-size; 16px: font-family; Klik: color; #ffffff. }:navbar b { padding; 0px 0px 0px 0px: width; 225px: text-decoration; none: font-size; 16px: font-family; Klik: color; #ffffff: display; inline-block. }:navbar c { padding; 25px 225px 0px 245px: width; 100%: height; 30px: text-decoration; none: font-size; 26px: font-family; theBoldFont: color; #000000: display; inline-block. }:navbar button { background-color; #000000: border; none: color; #ffffff: padding; 10px 32px: text-align; center: text-decoration; none: display; inline-block: font-size; 16px: font-family; Klik. }:navbar button:hover { background-color; #ffffff: border; none: color; #000000: padding; 10px 32px: text-align; center: text-decoration; none: display; inline-block: font-size; 16px: font-family; Klik. } </style> </head> <body> <div class="sidebar"> <b>Mozart</b> <b>Armstrong</b> <c>design • marketing • branding</c> <b></b> <b></b> <b></b> <a href="#">Graphic Design</a> <a href="#">Illustration</a> <a href="#">Animations</a> <a href="#">Photography</a> <a href="#">Writing</a> <a href="#">Fashion Design</a> <b></b> <b></b> <a href="#">About</a> </div> <div class="navbar"> <c>Graphic Design</c> <b></b> <button onclick="">All</button> <button onclick="">Red</button> <button onclick="">Yellow</button> <button onclick="">Green</button> <button onclick="">Blue</button> <button onclick="">Pink</button> </div> <div class="main"> <p></p><img src="Block2.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block3.png" width=100%></img><nextcol> <p></p><img src="Block4.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block2.png" width=100%></img><nextcol> <p></p><img src="Block5.png" width=100%><p></p><img src="Block3.png" width=100%></img><p></p><img src="Block.png" width=100%></img></img> </div> </body> </html>
2 个解决方案
解决方案1
0 2021-03-28 17:08:19
This can be easily done, for example, with the Isotope jQuery library:这可以很容易地完成，例如，使用同位素jQuery 库：
// external js: isotope.pkgd.js // init Isotope var $grid = $('.main').isotope({ itemSelector: '.img-block', layoutMode: 'fitRows' }); // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); });
@font-face { font-family: Klik; src: url(klik-light-webfont.woff); } @font-face { font-family: theBoldFont; src: url(theboldfont.ttf); } body{ padding: 0; margin: 0; }.main { margin-left: 200px; padding: 105px 10px; font-size: 16px; font-family: CaviarDreams; color: #000000; display: block; column-count: 3; column-width: 32% column-gap: 1%; }.main p { font-size: 24px; font-family: CaviarDreams; color: #000000; }.sidebar { height: 100%; width: 200px; position: fixed; z-index: 3; top: 0; left: 0; background-color: #000000; overflow-x: hidden; padding-top: 20px; }.sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 16px; font-family: CaviarDreams; color: #ffffff; display: block; }.sidebar a:hover { color: #808080; }.sidebar b { padding: 6px 8px 6px 16px; text-decoration: none; font-family: theBoldFont; font-size: 28px; color: #ffffff; display: block; }.sidebar c { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 13px; font-family: Klik; color: #ffffff; display: block; }.navbar { padding: 10px 0px 10px 10px; right: 0; margin-left: 200px; top: 0; z-index: 2; overflow-x: hidden; background-color: #808080; }.navbar a { padding: 20px 8px 16px 16px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; }.navbar b { padding: 0px 0px 0px 0px; width: 225px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; display: inline-block; }.navbar c { padding: 25px 225px 0px 245px; width: 100%; height: 30px; text-decoration: none; font-size: 26px; font-family: theBoldFont; color: #000000; display: inline-block; }.navbar button { background-color: #000000; border: none; color: #ffffff; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; }.navbar button:hover { background-color: #ffffff; border: none; color: #000000; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; }.img-block{ margin: 10px; }
<.DOCTYPE html> <head> <meta charset="UTF-8"> <title>Mozart Armstrong Portfolio Graphic Design</title> </head> <body> <div class="sidebar"> <b>Mozart</b> <b>Armstrong</b> <c>design • marketing • branding</c> <b></b> <b></b> <b></b> <a href="#">Graphic Design</a> <a href="#">Illustration</a> <a href="#">Animations</a> <a href="#">Photography</a> <a href="#">Writing</a> <a href="#">Fashion Design</a> <b></b> <b></b> <a href="#">About</a> </div> <div class="navbar"> <c>Graphic Design</c> <b></b> <div id="filters" class="button-group"> <button data-filter="*">All</button> <button data-filter=".img-red">Red</button> <button data-filter=".img-yellow">Yellow</button> <button data-filter=".img-green">Green</button> <button data-filter=".img-blue">Blue</button> <button data-filter=":img-pink">Pink</button> </div> </div> <div class="main"> <div class="img-block img-red" > <img src="https.//dummyimage:com/300x400/ff0000/fff" width="100%" /> </div> <div class="img-block img-yellow"> <img src="https.//dummyimage:com/300x400/ffff00/000000" width="100%" /> </div> <div class="img-block img-green"> <img src="https.//dummyimage:com/300x400/25b825/000000" width="100%" /> </div> <div class="img-block img-blue"> <img src="https.//dummyimage:com/300x400/2a31eb/ffffff" width="100%" /> </div> <div class="img-block img-pink"> <img src="https.//dummyimage:com/300x400/db2aeb/ffffff" width="100%" /> </div> <div class="img-block img-green"> <img src="https.//dummyimage:com/300x400/25b825/000000" width="100%" /> </div> <div class="img-block img-green"> <img src="https.//dummyimage:com/300x400/25b825/000000" width="100%" /> </div> <div class="img-block img-red"> <img src="https.//dummyimage:com/300x400/ff0000/fff" width="100%" /> </div> <div class="img-block img-red"> <img src="https.//dummyimage:com/300x400/ff0000/fff" width="100%" /> </div> <div class="img-block img-yellow"> <img src="https.//dummyimage:com/300x400/ffff00/000000" width="100%" /> </div> <div class="img-block img-yellow"> <img src="https.//dummyimage:com/300x400/ffff00/000000" width="100%" /> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min:js"></script> <script src="https.//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script> </body> </html>
解决方案2
0 已采纳 2021-03-28 18:07:31
Solution with JavaScript: JavaScript 的解决方案：
const button = document.querySelectorAll('.navbar button'); const img = document.querySelectorAll('img'); button.forEach(btn => btn.addEventListener('click', displayCard)); function displayCard(e) { for (let i =0; i < button.length; i++){ if (e.target === button[i]) { if (button[i].textContent === 'All') { for (let i = 0; i < img.length; i++){ img[i].style.display = 'block'; } } else if (button[i].textContent === 'Red'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='2'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Yellow'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='3'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Green'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='4'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Blue'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='5'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } else if (button[i].textContent === 'Pink'){ for (let i = 0; i < img.length; i++){ if (img[i].getAttribute('data-index') ==='1'){ img[i].style.display = 'block'; } else { img[i].style.display = 'none'; } } } } } }
img{ height: 400px; width: 300px; } img[src="Block2.png"]{ background-color: red; } img[src="Block3.png"]{ background-color: yellow; } img[src="Block4.png"]{ background-color: green; } img[src="Block5.png"]{ background-color: blue; } img[src="Block.png"]{ background-color: pink; }
<head> <meta charset="UTF-8"> <title>Mozart Armstrong Portfolio Graphic Design</title> <style> @font-face { font-family: Klik; src: url(klik-light-webfont.woff); } @font-face { font-family: theBoldFont; src: url(theboldfont.ttf); }.main { margin-left: 200px; padding: 105px 10px; font-size: 16px; font-family: CaviarDreams; color: #000000; display: block; column-count: 3; column-width: 32% column-gap: 1%; }.main p { font-size: 24px; font-family: CaviarDreams; color: #000000; }.sidebar { height: 100%; width: 200px; position: fixed; z-index: 3; top: 0; left: 0; background-color: #000000; overflow-x: hidden; padding-top: 20px; }.sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 16px; font-family: CaviarDreams; color: #ffffff; display: block; }.sidebar a:hover { color: #808080; }.sidebar b { padding: 6px 8px 6px 16px; text-decoration: none; font-family: theBoldFont; font-size: 28px; color: #ffffff; display: block; }.sidebar c { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 13px; font-family: Klik; color: #ffffff; display: block; }.navbar { position: absolute; padding: 10px 0px 10px 10px; height: 100px; width: 100%; right: 0; top: 0; z-index: 2; overflow-x: hidden; background-color: #808080; }.navbar a { padding: 20px 8px 16px 16px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; }.navbar b { padding: 0px 0px 0px 0px; width: 225px; text-decoration: none; font-size: 16px; font-family: Klik; color: #ffffff; display: inline-block; }.navbar c { padding: 25px 225px 0px 245px; width: 100%; height: 30px; text-decoration: none; font-size: 26px; font-family: theBoldFont; color: #000000; display: inline-block; }.navbar button { background-color: #000000; border: none; color: #ffffff; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; }.navbar button:hover { background-color: #ffffff; border: none; color: #000000; padding: 10px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-family: Klik; } </style> </head> <body> <div class="sidebar"> <b>Mozart</b> <b>Armstrong</b> <c>design • marketing • branding</c> <b></b> <b></b> <b></b> <a href="#">Graphic Design</a> <a href="#">Illustration</a> <a href="#">Animations</a> <a href="#">Photography</a> <a href="#">Writing</a> <a href="#">Fashion Design</a> <b></b> <b></b> <a href="#">About</a> </div> <div class="navbar"> <c>Graphic Design</c> <b></b> <button>All</button> <button>Red</button> <button>Yellow</button> <button>Green</button> <button>Blue</button> <button>Pink</button> </div> <div class="main"> <p></p><img src="Block2.png" data-index='2' width=100%></img><p></p><img src="Block.png" data-index="1" width=100%></img><p></p><img src="Block3.png" data-index='3' width=100%></img><nextcol> <p></p><img src="Block4.png" data-index="4" width=100%></img><p></p><img src="Block.png" data-index='1' width=100%></img><p></p><img src="Block2.png" data-index='2' width=100%></img><nextcol> <p></p><img src="Block5.png" data-index='5' width=100%><p></p><img src="Block3.png" data-index='3' width=100%></img><p></p><img data-index='1' src="Block.png" width=100%></img></img> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我的投资组合库过滤不正确？ - Why is my portfolio gallery not filtering right?
如何在我的网站上制作趋势视频缩略图的画廊？ - How can I make a gallery of tumbnails of trending videos on my website?
为什么我的画布不显示？ - Why won't my Canvas show up?
我一直在使用开发人员网站，为什么Google地图不会显示在我的网站上？ - Why won't google maps show on my website, I have been using the developers website?
如何让我的网站显示扩展的用户卡？ - How can I make my website show the expanded usercard?
为什么我的模态内容的背景色不显示？ - Why won't the background color of my modal content show?
我的 javascript 代码不会将元素推送到我的数组，我不知道为什么？ - My javascript code won't push elements to my array and I can't figure out why?
如何在不干扰代码的 rest 的情况下使用循环？ - How can I use looping without interfering with the rest of my code?
我的Google字体字体不再显示在我的网站上 - My font from Google Fonts won't show up on my website anymore
我可以让某人在我的网站上使用代码在不同的浏览器中打开一个网站 - Can I make someone open up a website in a different browser with code on my website
相关标签