【发布时间】：2018-10-08 15:43:46
【问题描述】：
我的标签实现基于以下内容：
https://codepen.io/oknoblich/pen/tfjFl
在这支笔中，我们有以下结构：
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Codepen</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Dribbble</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Dropbox</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Drupal</label>
<section id="content1">
content1
</section>
<section id="content2">
content2
</section>
<section id="content3">
content3
</section>
<section id="content4">
content4
</section>
通过同级选择器可以使用制表符：
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
但是我有几个“窗格”，每个都需要自己的选项卡，因此 name 和 id 属性是动态的。
在呈现 html 的 foreach 循环中，我有这个：
<div class="tabs-container">
<input data-bind="attr:{id: 'tab1-' + factorPaneId, name: 'tabs1-' + factorPaneId}" type="radio" checked>
<label data-bind="attr:{for: 'tab1-' + factorPaneId">Description</label>
<input data-bind="attr:{id: 'tab2-' + factorPaneId, name: 'tabs2-' + factorPaneId}" type="radio" checked>
<label data-bind="attr:{for: 'tab2-' + factorPaneId">Description</label>
<section data-bind="attr:{id: 'content1-' + factorPaneId">
<p data-bind="text: factor.factorDescription"></p>
</section>
<section data-bind="attr:{id: 'content2-' + factorPaneId">
<p data-bind="text: factor.factorDescription"></p>
</section>
</div>
但我不确定如何修改 CSS 来支持动态 ids 的需求。特别是这一点：
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
我需要某种方式说：
#tab1-*:checked ~ #content1-*{
display: block;
}
*s 相等的地方。有没有 CSS/HTML-only 解决方案？
【问题讨论】：
标签： html css knockout.js