문제 설명
고유 참조가 없는 한 HTML 페이지의 여러 탭(ID 또는 클래스 없음) (Multiple tabs in one HTML page without unique reference (no ID or class))
고유 참조 없이 하나의 HTML 페이지에 여러 탭을 가질 수 있습니까? 즉, 탭을 클릭할 때 표시될 콘텐츠에 대한 참조로 ID나 클래스가 없습니다. 아래 코드는 어떻게 생겼는지 시각화하기 위한 것입니다. 순수 CSS이며 ID를 사용합니다. 탭이 있는 여러 섹션이 하나의 HTML 페이지에 나타나야 합니다. 탭이 있는 이 코드 패턴은 여러 HTML 페이지에서 여러 번 재사용되어야 하므로 수동으로 미리 정의된 항목 없이 코드가 작동해야 하므로 일반적이어야 합니다. JS 및 nextElementSibling 등의 잠재적인 솔루션을 생각하고 있었습니다. 누구든지 솔루션을 지원하고 게시할 수 있습니까(예제에 반드시 있는 것은 아님, 이상적으로는 순수 JS, 라이브러리 없음)
참조 솔루션
방법 1:
If you insert your radio buttons inside <label> you don't have to use ids:
body {
background: #e0e0e0;
}
* {
transition: 0.5s ease‑in‑out;
box‑sizing: border‑box;
}
.accordion {
margin: 94px auto 0 auto;
max‑width: 500px;
height: 300px;
position: relative;
}
.accordion input.tab‑toggle {
position: absolute;
opacity: 0;
}
.accordion label input.tab‑toggle:checked + .tab‑title {
background: white;
}
.accordion label input.tab‑toggle:checked ~ .tab {
visibility: visible;
opacity: 1;
}
.accordion label {
float: left;
font‑size: 16px;
line‑height: 16px;
border‑radius: 3px 3px 0 0;
}
.accordion label:first‑of‑type .tab {
border‑radius: 0 3px 3px 3px;
}
.accordion label .tab‑title {
cursor: pointer;
display: block;
padding: 20px;
border‑radius: 3px 3px 0 0;
}
.accordion label .tab‑title:hover {
background: rgba(0, 0, 0, 0.1);
}
.accordion .tab {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 20px;
top: 56px;
left: 0;
min‑width: 100%;
height: 244px;
background: white;
border‑radius: 3px;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>
<div class="accordion">
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" checked/>
<span class="tab‑title">Tab One</span>
<div class="tab">
<p>Hi. I'm tab one's content. Nice to meet you.</p>
</div>
</label>
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" />
<span class="tab‑title">Tab Two</span>
<div class="tab">
<p>Hi. I'm tab two's content. Nice to meet you.</p>
</div>
</label>
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" />
<span class="tab‑title">Tab Three</span>
<div class="tab">
<p>Hi. I'm tab three's content. Nice to meet you.</p>
</div>
</label>
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" />
<span class="tab‑title">Tab Four</span>
<div class="tab">
<p>Hi. I'm tab four's content. Nice to meet you.</p>
</div>
</label>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>
<div class="accordion">
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" />
<span class="tab‑title">Tab Five</span>
<div class="tab">
<p>Tab Five</p>
</div>
</label>
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group"/>
<span class="tab‑title">Tab Six</span>
<div class="tab">
<p>Six</p>
</div>
</label>
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" />
<span class="tab‑title">Tab Seven</span>
<div class="tab">
<p>Seven</p>
</div>
</label>
<label>
<input class="tab‑toggle" type="radio" name="my_radio_group" />
<span class="tab‑title">Tab Eight</span>
<div class="tab">
<p>Eight</p>
</div>
</label>
</div>