CSS 선택기를 사용하여 라벨 선택

Question

나는 CSS에서만 라디오 버튼을 사용하여 탭을 만듭니다. 내가 겪고있는 문제는 라디오 버튼을 참조하는 <label>을 선택하는 방법을 알 수 없다는 것입니다. 라벨과 별도로 내용을 탭으로 배치 할 수 있습니다.

<div class="tab-labels"> 
    <label for="tab-1">Tab 1</label> 
    <label for="tab-2">Tab 2</label> 
    <label for="tab-3">Tab 3</label> 
</div> 

내용 창은 아래에 배치되어 있습니다. 입력 버튼은 내용 div 안에 저장되어 레이블을 클릭 할 때 선택할 수 있습니다. 그러나, 나는 역으로 갈 수 :

<div class="content-container"> 
    <div class="tab details"> 
     <input id="tab-1" type="radio" name="radio-set" class="tab-selector" checked="checked"/> 
     <div class="content"> 
      <p>Some content 1</p>     
     </div> 
    </div> 
    <div class="tab details"> 
     <input id="tab-2" type="radio" name="radio-set" class="tab-selector"/> 
     <div class="content"> 
      <p>Some content 2</p>     
     </div> 
    </div> 
    <div class="tab details"> 
     <input id="tab-3" type="radio" name="radio-set" class="tab-selector"/> 
     <div class="content"> 
      <p>Some content 3</p>      
     </div> 
    </div> 
</div> 

내가 달성하기 위해 노력하고있어이 문제에 대한 내 질문은 다음과 같습니다 라디오 입력을 클릭했을 때 어떻게 내가이 레이아웃 주어진 레이블 배경 색상을 변경할 수 있습니다 ? http://jsfiddle.net/mjohnsonco/6KeTR/

Answer 1

CSS

.bgcolor1{ 

background-color:#blue; 

} 
.bgcolor2{ 

background-color:green; 

} 
.bgcolor3{ 

background-color:red; 

} 

JQUERY

$('input[name=radio-set1]:checked', '#main').addClass(bgcolor1) 

$('input[name=radio-set2]:checked', '#main').addClass(bgcolor2) 

$('input[name=radio-set5]:checked', '#main').addClass(bgcolor3) 

HTML

<input id="tab-1" type="radio" name="radio-set1" class="tab-selector" checked="checked"/> 
<input id="tab-2" type="radio" name="radio-set2" class="tab-selector" checked="checked"/> 
<input id="tab-3" type="radio" name="radio-set3" class="tab-selector" checked="checked"/> 

<label class="bgcolor1" for="tab-1">Tab 1</label> 
<label class="bgcolor2" for="tab-2">Tab 2</label> 
<label class="bgcolor3" for="tab-3">Tab 3</label> 

Answer 2

:이 실시간으로 재생하려면

나는 바이올린을 제공 한

CSS로만이 작업을 수행 할 수 있지만 재구성 된 HTML과 더 못생긴 CSS에서만 가능합니다. 이 예에서

봐 : http://jsfiddle.net/kizu/6KeTR/16/ 여기

당신은 그들이 바로 당신이 그 (것)들을를 적용 할 블록을 앞에 것 대신에 자신의 컨테이너에서 모든 입력을 이동해야합니다. 그러나

#tab-1:checked ~ .content-container > .tab:first-child > .content, 
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content, 
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {} 

, 같은 CSS 전용 thingies 더 같다 : 그런 다음 탭의 부모와 ~ 콤비를 사용하여 컨텐츠, 일부 n 번째 자식이 같은 선택기를 대상으로 할 수 있도록이 경우에는 배치 개념 증명 (proof of-concept) - 그들은 JS 대응 물로서 유지 보수가 가능하고 유용하지 않습니다. 따라서 재미로 만 사용하는 것이 좋습니다.