只有CSS和HTML选项卡组件

Question

基于此示例，使用React: https://codepen.io/flkt-crnpio/pen/WxROwy/?editors=1100

问题:单击后选项卡内容始终可见，当然，当单击其他选项卡时，我不希望单击该选项卡。内容应该互换。但目前，当我点击第二个标签，这两个内容似乎重叠在屏幕上。

html:

 <div className="tabs">
                            <div
                                className="tab-2"
                                onClick={(e) => {
                                    this.toogleOptionChild(e)
                                }}
                                role="button"
                            >
                                <label htmlFor="adult">Für mich</label>
                                <input id="adult" name="adult" type="radio" checked="checked" />

                                <div>
                                    <h4>Erwachsenentarif</h4>
                                </div>
                            </div>
                            <div
                                className="tab-2"
                                onClick={(e) => {
                                    this.toogleOptionChild(e)
                                }}
                                role="button"
                            >
                                <label htmlFor="child">Für mein Kind</label>
                                <input id="child" name="child" type="radio" />

                                <div>
                                    <h4>Kindertarif</h4>
                                </div>
                            </div>
                        </div>

CSS:

    h1 {
        font-size: 40px;
        line-height: 1em;
        color: #696969;
    }

    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
    }

    .tabs {
        display: block;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        overflow: hidden;
    }
    .tabs [class^='tab'] label,
    .tabs [class*=' tab'] label {
        color: #696969;
        cursor: pointer;
        display: block;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1em;
        padding: 2rem 0;
        text-align: center;
    }
    .tabs [class^='tab'] [type='radio'],
    .tabs [class*=' tab'] [type='radio'] {
        border-bottom: 1px solid rgba(239, 237, 239, 0.5);
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .tabs [class^='tab'] [type='radio']:hover,
    .tabs [class^='tab'] [type='radio']:focus,
    .tabs [class*=' tab'] [type='radio']:hover,
    .tabs [class*=' tab'] [type='radio']:focus {
        border-bottom: 1px solid $cerulean;
    }
    .tabs [class^='tab'] [type='radio']:checked,
    .tabs [class*=' tab'] [type='radio']:checked {
        border-bottom: 2px solid $cerulean;
    }
    .tabs [class^='tab'] [type='radio']:checked + div,
    .tabs [class*=' tab'] [type='radio']:checked + div {
        opacity: 1;
    }
    .tabs [class^='tab'] [type='radio'] + div,
    .tabs [class*=' tab'] [type='radio'] + div {
        display: block;
        opacity: 0;
        padding: 2rem 0;
        width: 90%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .tabs .tab-2 {
        width: 50%;
    }
    .tabs .tab-2 [type='radio'] + div {
        width: 200%;
        margin-left: 200%;
    }
    .tabs .tab-2 [type='radio']:checked + div {
        margin-left: 0;
    }
    .tabs .tab-2:last-child [type='radio'] + div {
        margin-left: 100%;
    }
    .tabs .tab-2:last-child [type='radio']:checked + div {
        margin-left: -100%;
    }

如果有人能告诉我我做错了什么，我很感激。thx！1：https://codepen.io/flkt-crnpio/pen/WxROwy/?editors=1100

Answer 1

在意识到它不起作用之前，你做了太多了。

id

• +单选按钮不能按您尝试的方式设置样式，但可以隐藏

• 以在收音机之间切换选择，但只需检查一次，它们需要具有相同的name值(意味着它们是一个只能检查一个选项卡的组)，并且有一个不同的name选择器是可以的，但是opacity :0;在流程中保留了元素(为什么不能，但只能看到一个，并且可以检查您的收音机:( )

• 负裕度可以作为一种方式来考虑每个选项卡的高度，但不知怎么说，它很笨拙。)幸运的是，现在有了网格，许多子节点可以共享相同的单元，而无需在前面使用absolute.

• inputs容器来隐藏/显示对于选择器+来说，但是您还可以使用~选择器将输入分组在一起(代码的可读性)，但也可以将选择器减少到单个one.grouping，在标签之前的输入可能也允许对标签进行样式化(

)。

例如，对于输入可以使用相同的名称值，但是对于不同的id和网格，可以执行哪些操作(不突出当前标签)

​

.tabs {
    display:grid;
    grid-template-columns:repeat(2,1fr); 
} 
.tab-2 {
    grid-row:2;
    grid-column:1 / 3;
} 
input[name="group"] {display:none;}
input[name="group"] +  div { 
    opacity:0; 
    background:white;
}
 
input[name="group"]:checked + div {
    opacity:1;
    z-index:1;
}

/* any extra style you need */
.tabs { 
    border:solid;
}
label {
    text-align:center;
    border-bottom:solid;
    cursor:pointer
}  
input[name="group"] +  div {  
    transition:0.5s;
    position:relative;
    z-index:-1; 
}

<div class="tabs">
    <label For="adult">Für mich</label>
    <label For="child">Für mein Kind</label>
    <div class="tab-2">
        <input id="adult" name="group" id="adult" type="radio" checked="checked" />
        <div>
            <h4>Erwachsenentarif</h4>
        </div>
    </div>
    <div class="tab-2">
        <input id="child" name="group" id="child" type="radio" />
        <div>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
        </div>
    </div>
</div>

​