如何在我的網站上制作帶有過濾功能的作品集庫，而不破壞我的代碼的 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?
問題描述
我一直在嘗試使用 HTML、CSS 和 Javascript 在我的網站上編寫帶有過濾功能的投資組合庫。 我查看了多個教程（ w3Schools 、 Geeks for Geeks ）並完全按照它們進行操作，但都沒有成功。 使用 w3Schools，我留下了一個完全空的正文內容區域，而使用 Geeks for Geeks，我的正文內容區域中有圖像，但我的側邊欄和導航欄都完全被破壞了，即使代碼中的更改沒有關聯給他們。
所以，這就是我想要做的：我有一個看起來像這樣的網頁，當我點擊導航欄中的按鈕時，我想按顏色過濾掉這些塊。 因此，如果我單擊黃色，結果將如下所示。 （圖像的實際網格是 3x3，其中有兩個黃色塊。）我希望它們盡可能正確地分類為三列。
編輯：這是我原來的錯誤代碼，解決方案在評論中：
<: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
這可以很容易地完成，例如，使用同位素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
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>
我一直在使用開發人員網站，為什么Google地圖不會顯示在我的網站上？
[英]Why won't google maps show on my website, I have been using the developers website?
我的 javascript 代碼不會將元素推送到我的數組，我不知道為什么？
[英]My javascript code won't push elements to my array and I can't figure out why?
我可以讓某人在我的網站上使用代碼在不同的瀏覽器中打開一個網站
[英]Can I make someone open up a website in a different browser with code on my website
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.