基于此示例,使用React:[https://codepen.io/flkt-crnpio/pen/WxROwy/?编辑=1100][1]
问题是:
选项卡内容在单击后始终保持可见,当然我不希望在单击其他选项卡时这样做。内容应该互换。但目前,当我点击第二个选项卡时,两个内容在屏幕上出现重叠。
html:
className="tab-2"
onClick={(e) => {
this.toogleOptionChild(e)
}}
role="button"
>
Für mich
Erwachsenentarif
className="tab-2"
onClick={(e) => {
this.toogleOptionChild(e)
}}
role="button"
>
Für mein Kind
Kindertarif
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%;
}