어떻게 단 하나의 버튼을 사용하여 div 상자를 페이드 인하 고 아웃으로 만드나요?

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 : input:checked와 adjacent child selector와 labels, inputs을 사용하고이 일을

<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

한 가지 방법.

http://jsfiddle.net/7DUFS/