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

Question

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

我一直在使用CSS Grid和javascript来实现此目的，但是，当我单击按钮时，CSS Grid丢失了，我不确定为什么。我正在使用无显示和阻止来显示和隐藏每个部分。

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

Ok, this should be a very easy fix. Check out the updated showBreakfast() and showLunch() functions. On show, instead of changing the display property to block you wanted to change them to grid, maintaining the desired layout. By changing the display property to block you were blowing up your layout. Run the snippet, you will smile.

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>