나는 현재 TAB자바 스크립트없이 HTML과 CSS로만 만들려고 노력 하고 있으며 라디오 버튼으로 할 수 있다는 것을 알았습니다.
<body>
<div id="a1" class="a1">
<div id="a2" class="a2">
<div id="a3" class="a3">
<div id="menu" class="menu">
<div id="menu-1"> <input id=radio-1 checked ><label></label> </div>
<div id="menu-2"> <input id=radio-2><label></label> </div>
<div id="menu-3"> <input id=radio-3><label></label> </div>
</div>
</div>
</div>
</div>
<div id="b1" class="b1">
<div id="b2" class="b2">
<div id="container" class="container">
<div id="content1" class="content1"></div>
<div id="content1" class="content1"></div>
<div id="content1" class="content1"></div>
</div>
</div>
</div>
</body>
radio-buton과 content가 형제 태그의 두 요소이거나 동일한 부모를 가지고 있다면, 결합 자 "~"를 사용할 수 있습니다. 또는 이것이 서로 다음이면 "+"를 사용하여 해당 요소를 선택기로 결합 할 수 있습니다. 모든 radio- "n"은 다음과 같이 "{}"내부의 코드가 content- "n"요소 (conten- "n"로 표시 및 전송)에서 작동하는지 확인합니다.
/* CSS */
#radio-1:checked ~ .content-1,
#radio-1:checked ~ .content-2,
#radio-1:checked ~ .content-3 {
opacity: 1;
transition: all 1s;
blablabla;
blablabla;
}
/* CSS */
그러나 문제는 위와 같이 내 html 디자인에 있으며 radiobutton컨텐츠가 이미 다른 세계에 너무 많이 배치되어 있거나 다른 부모 트리가 있다고 말할 수 있습니다.
html 디자인을 변경하지 않을 경우 다른 부모 트리를 가진 요소를 CSS의 선택기에 연결 / 결합하는 다른 방법이 있습니까?
-고마워요 ...
올바르게 언급했듯이 라디오 버튼 (유형 radio과 이름이 모두 누락 되어 실제로 예제에서 텍스트 입력 )은 CSS 선택기 단독으로 범위를 벗어납니다.
따라서 HTML이 동일하게 유지되어야한다면 자바 스크립트를 사용할 의무가 있습니다.
한 가지 간단한 방법은 라디오 버튼에 이벤트 핸들러가 있는지 확인하고 변경 사항을 수신하는 것입니다 (선택).
이것을 시연 하는 작업 바이올린 . ( idHTML에서 속성 의 양을 줄이고 요소에 type및 name속성을 추가했습니다.<input>
그러나 javascript를 사용하지 않고도이 문제를 해결할 수 있지만 HTML을 변경해야합니다 (약간이지만 여전히). 요령은 라디오 버튼 이 탭과 그 내용이 모두 있는 위 또는 수준에 있도록하는 것입니다.
트릭은 레이블 이 페이지의 어느 곳에서나 입력 요소를 참조하도록 하고 라디오 버튼을 숨기는 옵션을 사용 (또는 남용)하는 것 입니다.
매우 축소 된 HTML 세트로 간단한 데모 .
.trickery > input {
display: none;
}
.tabs > label {
display: inline-block;
width: 8em;
border: 1px solid gold;
}
.container > div {
display: none;
min-height: 8em;
border: 1px solid gold;
}
#tab-1:checked ~ .tabs [for=tab-1],
#tab-2:checked ~ .tabs [for=tab-2],
#tab-3:checked ~ .tabs [for=tab-3] {
background-color: gold;
}
[value=content-1]:checked ~ .container #content-1,
[value=content-2]:checked ~ .container #content-2,
[value=content-3]:checked ~ .container #content-3 {
display: block;
}<div class=trickery>
<input id=tab-1 type=radio name=tab value=content-1 checked>
<input id=tab-2 type=radio name=tab value=content-2>
<input id=tab-3 type=radio name=tab value=content-3>
<div class=tabs>
<label for=tab-1>tab one</label>
<label for=tab-2>tab two</label>
<label for=tab-3>tab three</label>
</div>
<div class=container>
<div id=content-1>content one</div>
<div id=content-2>content two</div>
<div id=content-3>content three</div>
</div>
</div>HTML의 주요 변경 사항 radio은 탭과 콘텐츠 모두에 '도달'할 수있을만큼 버튼을 위로 이동하는 것입니다 (본문의 직접적인 자식으로 탭 앞에있는 구조를 고려할 때).
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다