css - 如何仅使用一个按钮使 div 框淡入淡出？

Question

仅限 CSS/HTML 样式代码。 Jquery 等不适用于我的页面。

我正在尝试让每个框响应其上方的圆形标签。我希望这些框开始时不可见/褪色，但在单击相应的圆形选项卡时出现。同样，我希望框的选项能够在第二次单击按钮后消失，恢复到其原始的不可见/淡出状态。

我不确定我是应该使用淡出/淡入元素还是 onclick 元素，因为我是这个想法的新手。我已经阅读了一些关于它的页面，但我似乎无法将它合并到我自己的代码中，而我认为可能有用的那些最终成为了 Jquery。我以前见过它以类似于我希望如何使用它们的方式完成，我想更好地理解它。

如果已经有人问过这种性质的问题，我深表歉意，但我找不到任何示例来帮助我，而且我已经搜索了很长时间。我所知道的关于编码的一切都是我自学的，这本身就是一场斗争。如果有任何反馈，我将不胜感激。

CSS:

body {
    background-color: #666;
    overflow-x: hidden;
}
#profile {
    border: 0px;
    background-color:transparent;
}
/*--Content--*/
#container {
    position: absolute;
    top: 80px;
    left: 420px;
    height: 500px;
    width: 1170px;
}
.textbox {
    position: relative;
    float: left;
    top: 120px;
    height: 200px;
    width: 200px;
    margin: 3px;
    padding: 10px;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, .6);
    overflow: auto;
}
/*--Navigation--*/
#nav {
    top: 200px;
    display: inline-block;
    width: 100%;
}
#nav li {
    float: left;
    margin: 0 90px;
}
#nav a {
    display: inline-block;
    width: 100px;
    padding: 3px 0;
}
/*--Nav Tabs--*/
#circle {
    position: fixed;
    width: 30px;
    height: 30px;
    overflow: auto;
    background-color: #000;
    border-radius: 50px;
    box-shadow: 0 0 15px #fff, inset 0 0 10px #6699cc;
    margin: 3px 0 0 30px;
}
#circle:hover {
    background-color: #ccc;
}

HTML:

<div id="container">
    <div id="navbox">
        <ul id="nav">
            <li><a href="#1"><div id="circle"></div></a>
            </li>
            <li><a href="#2"><div id="circle"></div></a>
            </li>
            <li><a href="#3"><div id="circle"></div></a>
            </li>
        </ul>
    </div>
<a name="1"></a>

    <div class="textbox">Info 1.</div>
<a name="2"></a>

    <div class="textbox">Info 2.</div>
<a name="3"></a>

    <div class="textbox">Info 3.</div>
</div>

Answer 1

一种方法是使用 labels、inputs 和 input:checked 以及一个 adjacent child selector .

这是一个演示:

http://jsfiddle.net/7DUFS/