다른 요소를 선택하여 시각적 요소를 만드는 방법은 무엇입니까?

Question

<ul>과 함께 네 개의 라벨이있는 가로 메뉴를 만들었습니다.

각 레이블과 연결된 <div class="content">이 있습니다. 첫 번째 레이블이 표시되고 다른 세 레이블은 숨겨집니다. 을으로 선택하고 싶은 레이블을 선택하고 싶습니다.

나는 :hover과 :select으로 시도했지만 해결할 수 없습니다.

내 코드 : http://jsfiddle.net/Trimax/69YcC/

<div id="labels-menu"> 
    <ul> 
     <li><a href="#1">Label 1</a> 

     </li> 
     <li><a href="#2">Label 2</a> 

     </li> 
     <li><a href="#3">Label 3</a> 

     </li> 
     <li><a href="#4">Label 4</a> 

     </li> 
    </ul> 
</div> 
<div id="container"> 
    <div id="label-1" class="content"> 
     <div class="left"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p> 
     </div> 
     <div class="right"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac eleifend lorem. Ut vitae dictum lectus, id fringilla justo. Duis ullamcorper leo nec lorem rutrum, vulputate volutpat metus scelerisque. Morbi elementum nunc auctor, feugiat urna et, ornare dolor.</p> 
     </div> 
    </div> 
    <div id="label-2" class="content"> 
     <div class="left"> 
      <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p> 
     </div> 
     <div class="right"> 
      <p>Pellentesque rhoncus ornare arcu et vulputate. Morbi sit amet lorem mollis, placerat sapien sit amet, aliquet neque. Vestibulum pellentesque fringilla tortor, in accumsan sapien mattis sit amet. Aliquam tellus enim, tincidunt sit amet elit non, scelerisque venenatis justo.</p> 
     </div> 
    </div> 
    <div id="label-3" class="content"> 
     <div class="left"> 
      <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p> 
     </div> 
     <div class="right"> 
      <p>Donec hendrerit tellus metus, adipiscing placerat purus ultricies id. Maecenas magna sem, convallis eu aliquet vitae, pretium rhoncus leo.</p> 
     </div> 
    </div> 
    <div id="label-4" class="content"> 
     <div class="left"> 
      <p>Aliquam ornare suscipit purus, eu elementum nulla semper a. Praesent varius euismod augue vitae luctus. Integer venenatis sollicitudin felis semper scelerisque. Vivamus ultrices congue tristique.</p> 
     </div> 
     <div class="right"> 
      <p>Aliquam ornare suscipit purus, eu elementum nulla semper a. Praesent varius euismod augue vitae luctus. Integer venenatis sollicitudin felis semper scelerisque. Vivamus ultrices congue tristique.</p> 
     </div> 
    </div> 
</div> 

에만 CSS와 함께이 할 수있는 방법이 있나요?

Answer 1

내 과학에 따르면 해결할 수있는 방법은 하나 뿐이지 만 라디오 나 체크 버튼을 사용하는 것이지만 문제는 컨테이너 높이가 고정된다는 것입니다.