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

Question

我知道你可以用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;
}

Answer 1

在没有JavaScript的情况下尝试这个小技巧，只有css和html。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;