Question

我试图避免使用javascript来实现只能用CSS实现的东西（我不想在这里讨论太多的原因，只是想关注我的问题＆＃39 ;我有）。因此，我已经为我的网站开发了一个使用主题标签和目标打开的模态功能（类似于：http://codepen.io/maccadb7/pen/nbHEg）。

那很好;符合我的要求。现在的问题是我想在模态div中放置一个仅CSS的选项卡控件。我见过的唯一方法涉及使用主题标签和目标（正如我的模态所做的那样，已经有）。我在网址中不能有多个主题标签 - 所以我现在别无选择，只能使用javascript吗？

Answer 1

另一种方法是，相对定位的盒子拿着绝对定位的标签和内联无线电输入，选择器中的+选择可见的

<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

您可能需要在生产代码

中为溢出等做更多工作

Answer 2

您可以使用单选按钮和大量css来创建非javascript标签控件

<div id="content">
    <label class="what-tab" for="what-tab">What is </label>
    <label class="example-tab" for="example-tab">Examples</label>
    <input type="radio" name="tab" id="example-tab"/>
    <input type="radio" name="tab" id="what-tab" checked=""/>
    <div id="group">
         <div id="what">What</div>
         <div id="example">Example</div>
    </div>
</div>

#content label{
    width: 150px;
    height: 25px;
    display: block;
    float: left;
    text-align: center;
    line-height: 25px;
}
#content label:hover{
    color: white;
}
[name=tab]{
    position: absolute;
    visibility: hidden;
}
.what-tab{
    background-color: green;
}
.example-tab
{
    background-color: blue;
}
#group{
    clear: left;
    position: relative;
    height: 525px;
}
#group > div{
    position: absolute;
    height: 500px;
    width: 100%;
    opacity: 0;
    padding: 10px;
    overflow: auto;
    z-index: 1;
}
#what{
    border: solid 1px blue;
}
#example{
    border: solid 1px green;
}
#example > label{
    background-color: green;
}
#example > div{
    font-size: 18px;
    padding: 5px;
    display:none;
    clear:both;
}
#example-tab:checked ~ #group #example{
    opacity: 1;
    z-index: 2;
}
#what-tab:checked ~ #group #what{
    opacity: 1;
    z-index: 2;
}
input[name="eg-tab"]{
    display:none;
}
input + div{
    clear:both;
}

http://jsfiddle.net/FPD58/2/

我是否通过使用主题标签达到了极限？

2 个答案: