使用严格的 HTML/CSS 隐藏和显示内容

【问题标题】：Hiding and Showing content using strict HTML/CSS使用严格的 HTML/CSS 隐藏和显示内容
【发布时间】：2017-05-09 23:35:12
【问题描述】：

我知道您可以使用 JavaScript/jQuery 使用 toggle() 函数在 html 中隐藏和显示内容，但是，这将如何在准系统 HTML 和 CSS 中完成？如果我有以下代码？

<div class="story" id=part1">
    Part 1 of story
    <a href="#" id="button1">Click Here to go to Part 2</a>
</div>

<div class="story" id="part2">
    Part 2 of story
    <a href="#" id="button2">Click Here to go to Part 1</a>
</div>

#part2 {
    display: none;
}

【问题讨论】：

没有 css 属性来切换显示属性。您明确设置它。

标签： html css toggle show-hide

【解决方案1】：

试试这个小技巧，不用 JavaScript，只用 css 和 html。

.wrapper {
        height: 100px;
        width: 400px;
        overflow: hidden;
}

.story {
    color: white;
    height: 100px;
    width: 100%;
}

#part1 {
    background-color: green;
}

#part2 {
    margin-top: 10000px;
    background-color: red;
}

<div class="wrapper">
    <div class="story" id="part1">
        Part 1 of story
        <a href="#part2" id="button1">Click Here to go to Part 2</a>
    </div>

    <div class="story" id="part2">
        Part 2 of story
        <a href="#part1" id="button2">Click Here to go to Part 1</a>
    </div>
</div>

【讨论】：