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

概述我正在尝试在网站上创建一个部分,以显示图片和带有标题的段落,具体取决于所选按钮.例如,通过单击午餐,将显示午餐选项,默认的早餐选项将消失.我一直在使用CSS Grid和javascript来实现这一点,但是,当我单击按钮时,CSS Grid丢失了,我不确定为什么.我正在使用无显示和阻止来显示和隐藏每个部分.let breakfastButton = docu

我正在尝试在网站上创建一个部分,以显示图片和带有标题的段落,具体取决于所选按钮.例如,通过单击午餐,将显示午餐选项,默认的早餐选项将消失.

我一直在使用CSS GrID和javascript来实现这一点,但是,当我单击按钮时,CSS GrID丢失了,我不确定为什么.我正在使用无显示和阻止来显示和隐藏每个部分.

let breakfastbutton = document.getElementByID('breakfastbutton').addEventListener('click',showBreakfast);let lunchbutton = document.getElementByID('lunchbutton').addEventListener('click',showLunch);// breakfastfunction showBreakfast() {    document.getElementByID('breakfast').style.display = 'block';    document.getElementByID('lunch').style.display = 'none';}// lunchfunction 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);    --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 >                <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 >                <h2>Lunch</h2>                <p>The most important meal of the day,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>

如您所见,最上面的图像是我想要的最终结果,而最下面的图像是单击午餐按钮时发生的情况,而不是我想要达到的结果.

最佳答案好的,这应该是非常简单的修复.检查更新的showBreakfast()和showLunch()函数.在显示时,您无需将display属性更改为block即可将其更改为grID,而是保持所需的布局.通过更改显示属性以阻止,您正在放大布局.运行摘要,您将微笑.

let breakfastbutton = document.getElementByID('breakfastbutton').addEventListener('click',showLunch);// breakfastfunction showBreakfast() {    document.getElementByID('breakfast').style.display = 'grID';    document.getElementByID('lunch').style.display = 'none';}// lunchfunction showLunch() {    document.getElementByID('lunch').style.display = 'grID';    document.getElementByID('breakfast').style.display = 'none';}

* {    padding: 0;    margin: 0;    Font-family: 'Roboto',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 >                <h2>Breakfast</h2>                <p>The most important meal of the day,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>

总结

以上是内存溢出为你收集整理的如何使用CSS Grid和Javascript制作幻灯片 全部内容，希望文章能够帮你解决如何使用CSS Grid和Javascript制作幻灯片 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。