Question

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

我正在努力使每个盒子响应它上面的圆形标签。我希望这些框开始为不可见/褪色，但在单击相应的圆形标签时显示。同样，我希望第二次单击按钮后，框的选项能够消失，恢复到原来的不可见/淡出状态。

我不确定我是否应该使用fadeout / fadein元素或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/

如何只使用一个按钮使div框淡入和淡出？

1 个答案: