如何使用CSS Grid和Javascript制作幻燈片

Question

我正在嘗試在我的網站中創建一個部分來顯示圖片和帶有標題的段落，具體取決於所選按鈕。 例如，通過單擊午餐，午餐選項顯示，默認早餐選項消失。

我一直在使用CSS Grid和javascript來實現這一點，但是，當我點擊按鈕時，CSS Grid丟失了，我不知道為什么。 我使用display none和block來顯示和隱藏每個部分。

 let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast); let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch); // breakfast function showBreakfast() { document.getElementById('breakfast').style.display = 'block'; document.getElementById('lunch').style.display = 'none'; } // lunch function showLunch() { document.getElementById('lunch').style.display = 'block'; document.getElementById('breakfast').style.display = 'none'; } 

 * { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; margin: 0 auto; } .container { padding: 1em; line-height: 2em; max-width: 1200px } h2 { font-size: 2em; font-weight: 300; padding: 10px 0 } p { font-size: 22px; color: #707070; font-weight: 300; } :root { --main--color: #FF4E4E; --main--color--hover: rgb(250, 0, 0); --nav--size: 1.5em; --footer--size: 1.125em; } /* when to eat */ .meals { margin-top: 80px; text-align: left; /* grid */ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; } #lunch { display: none; } .button-container { margin-top: 30px; width: 60%; /* grid */ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 20px; } .button-basics { background-color: var(--main--color); width: 100px; height: 30px; border-radius: 20px; color: white; padding: 5px; text-align: center; } .button-basics:hover { background-color: var(--main--color--hover); cursor: pointer; } .meals>img { width: 100%; } 

  <!-- meal times --> <!-- breakfast --> <div id="breakfast" class='meals'> <img src="images/breakfast.jpg" alt=""> <div class="description"> <h2>Breakfast</h2> <p>The most important meal of the day, right? Not exactly. Since you are an athlete training and eating constantly, breakfast can possibly mean twice a day depending on your workouts. However, it is still hugely important to refuel after any early morning workouts with a filling and hearty meal </p> </div> </div> <!-- lunch --> <div id="lunch" class='meals'> <img src="images/lunch.jpg" alt=""> <div class="description"> <h2>Lunch</h2> <p>The most important meal of the day, right? Not exactly. Since you are an athlete training and eating constantly, breakfast can possibly mean twice a day depending on your workouts. However, it is still hugely important to refuel after any early morning workouts with a filling and hearty meal </p> </div> </div> <!-- meal buttons --> <div class='button-container'> <div id="breakfastButton" class='button-basics'>Breakfast</div> <div id="lunchButton" class='button-basics'>Lunch</div> <div class='button-basics'>Dinner</div> <div class='button-basics'>Snacks</div> </div> </div> 

正如您所看到的，頂部圖像是我期望的最終結果，而底部圖像是當我單擊午餐按鈕而不是我想要實現的結果時發生的情況。

Answer 1

好的，這應該是一個非常簡單的解決方案。 查看更新后的showBreakfast()和showLunch()函數。 在展示中，不是將顯示屬性更改為block您想要將它們更改為grid ，而是保持所需的布局。 通過將display屬性更改為block您正在炸毀您的布局。 運行片段，你會微笑。

 let breakfastButton = document.getElementById('breakfastButton').addEventListener('click', showBreakfast); let lunchButton = document.getElementById('lunchButton').addEventListener('click', showLunch); // breakfast function showBreakfast() { document.getElementById('breakfast').style.display = 'grid'; document.getElementById('lunch').style.display = 'none'; } // lunch function showLunch() { document.getElementById('lunch').style.display = 'grid'; document.getElementById('breakfast').style.display = 'none'; } 

 * { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; margin: 0 auto; } .container { padding: 1em; line-height: 2em; max-width: 1200px } h2 { font-size: 2em; font-weight: 300; padding: 10px 0 } p { font-size: 22px; color: #707070; font-weight: 300; } :root { --main--color: #FF4E4E; --main--color--hover: rgb(250, 0, 0); --nav--size: 1.5em; --footer--size: 1.125em; } /* when to eat */ .meals { margin-top: 80px; text-align: left; /* grid */ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; } #lunch { display: none; } .button-container { margin-top: 30px; width: 60%; /* grid */ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 20px; } .button-basics { background-color: var(--main--color); width: 100px; height: 30px; border-radius: 20px; color: white; padding: 5px; text-align: center; } .button-basics:hover { background-color: var(--main--color--hover); cursor: pointer; } .meals>img { width: 100%; } 

 <!-- meal times --> <!-- breakfast --> <div id="breakfast" class='meals'> <img src="images/breakfast.jpg" alt=""> <div class="description"> <h2>Breakfast</h2> <p>The most important meal of the day, right? Not exactly. Since you are an athlete training and eating constantly, breakfast can possibly mean twice a day depending on your workouts. However, it is still hugely important to refuel after any early morning workouts with a filling and hearty meal </p> </div> </div> <!-- lunch --> <div id="lunch" class='meals'> <img src="images/lunch.jpg" alt=""> <div class="description"> <h2>Lunch</h2> <p>The most important meal of the day, right? Not exactly. Since you are an athlete training and eating constantly, breakfast can possibly mean twice a day depending on your workouts. However, it is still hugely important to refuel after any early morning workouts with a filling and hearty meal </p> </div> </div> <!-- meal buttons --> <div class='button-container'> <div id="breakfastButton" class='button-basics'>Breakfast</div> <div id="lunchButton" class='button-basics'>Lunch</div> <div class='button-basics'>Dinner</div> <div class='button-basics'>Snacks</div> </div> </div>