【发布时间】：2021-05-07 15:51:29
【问题描述】：
一个 HTML 页面中是否可以有多个选项卡而没有唯一引用，即没有 ID 或类作为单击选项卡时要显示的内容的参考。下面的代码只是为了可视化它的外观。它是纯 CSS 并使用 ID。多个带有选项卡的此类部分应出现在一个 HTML 页面中。代码应该可以在没有任何手动预定义的东西的情况下工作，因为这个带有标签的代码模式应该在多个 HTML 页面上重复使用多次，因此它应该是通用的。我正在考虑使用 JS 和 nextElementSibling 之类的潜在解决方案。任何人都可以支持并发布解决方案（不一定在示例中；理想情况下使用纯 JS，没有库）？
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 input.tab-toggle:checked + label {
background: white;
}
.accordion input.tab-toggle:checked + label .tab-title:hover {
background: transparent;
}
.accordion input.tab-toggle:checked + label .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 {
display: block;
padding: 20px;
border-radius: 3px 3px 0 0;
}
.accordion label .tab-title:hover {
cursor: pointer;
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">
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_one" checked/>
<label for="tab_one">
<span class="tab-title">Tab One</span>
<div class="tab" id="tab_one_wrapper">
<p>Hi. I'm tab one's content. Nice to meet you.</p>
</div>
</label>
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_two" />
<label for="tab_two">
<span class="tab-title">Tab Two</span>
<div class="tab" id="tab_two_wrapper">
<p>Hi. I'm tab two's content. Nice to meet you.</p>
</div>
</label>
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_three" />
<label for="tab_three">
<span class="tab-title">Tab Three</span>
<div class="tab" id="tab_three_wrapper">
<p>Hi. I'm tab three's content. Nice to meet you.</p>
</div>
</label>
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_four" />
<label for="tab_four">
<span class="tab-title">Tab Four</span>
<div class="tab" id="tab_four_wrapper">
<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">
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_five" />
<label for="tab_five">
<span class="tab-title">Tab Five</span>
<div class="tab" id="tab_five_wrapper">
<p>Tab Five</p>
</div>
</label>
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_six"/>
<label for="tab_six">
<span class="tab-title">Tab Six</span>
<div class="tab" id="tab_six_wrapper">
<p>Six</p>
</div>
</label>
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_seven" />
<label for="tab_seven">
<span class="tab-title">Tab Seven</span>
<div class="tab" id="tab_seven_wrapper">
<p>Seven</p>
</div>
</label>
<input class="tab-toggle" type="radio" name="my_radio_group" id="tab_eight" />
<label for="tab_eight">
<span class="tab-title">Tab Eight</span>
<div class="tab" id="tab_eight_wrapper">
<p>Eight</p>
</div>
</label>
</div>【问题讨论】：
-
给定的 CSS 根本不依赖
id。它已经可以重复使用了 -
@TJ CSS 没有，但标签按 ID 分配给单选按钮。
标签： javascript html css tabs