javascript - 我在这里使用主题标签是否达到了极限？

Question

我正在努力避免将 javascript 用于只能通过 CSS 实现的事情(我不想在这里过多地讨论原因，只想专注于我遇到的问题)。因此，我为我的网站开发了一个模式功能，该功能使用主题标签和目标打开(类似于:http://codepen.io/maccadb7/pen/nbHEg)。

没关系；按照我的意愿工作。现在的问题是我想在模态 div 中放置一个纯 CSS 选项卡控件。我见过的唯一方法涉及使用主题标签和目标(就像我的模式所做的那样，并且已经拥有)。我不能在 URL 中有多个主题标签 - 所以我现在别无选择只能使用 javascript 吗？

Answer 1

另一种方法是，相对定位的框包含绝对定位的选项卡和内联 radio 输入，以及选择器中的 + 以选择可见的

<div class="tabbox">
    <label for="tab1">A</label>
    <input id="tab1" type="radio" name="tab" class="tabchoice" />
    <div class="tabcontent">hello</div>
    <label for="tab2">B</label>
    <input id="tab2" type="radio" name="tab" class="tabchoice" />
    <div class="tabcontent">world</div>
</div>

.tabbox {
    position: relative;
}
.tabcontent {
    position: absolute;
    top: 20px;
    left: 0;
    display: none;
}
.tabchoice:checked + .tabcontent {
    display:block;
}

DEMO

您可能需要在生产代码中为溢出等做更多的工作